Configure Wowza Player for Wowza Streaming Cloud ultra low latency streams

Learn how to use the Wowza Player Builder to preview your Wowza Streaming Cloud ultra low latency stream and to get the embed code you need so that viewers can watch the stream from your webpage.

Notes:

Configure playback with Wowza Player Builder


  1. Sign in to Wowza Player Builder.
  2. On the Source Stream Information tab, enter a valid License Key. For licensing details, see Access Wowza Player.

    Hint: You can prepopulate the License Key, Source Stream, and Fallback Source Stream (if HLS is enabled) information by navigating to the Wowza Player Builder from within the Wowza Streaming Cloud web manager:
    1. In Wowza Streaming Cloud, click Advanced on the menu bar, and then click Stream Targets.
    2. Select an ultra low latency target on the Stream Targets page.
    3. Click Test player for Wowza ultra low latency targets to launch Wowza Player with prepopulated fields.
  3. Enter the WebSocket playback URL for your ultra low latency stream target in the Source Stream field. For example, 

    ws://edge.cdn.wowza.com/live/_definst_/0P1q1UHJEN1RzbXdRVGszMHoxWm15f33
    /stream.ws

    If Wowza Player is loaded over HTTPS, you must provide a secure playback URL. For example, wss://edge.cdn.wowza.com/live/_definst_/0P1q1UHJEN1RzbXdRVGszMHoxWm15f33

    /stream.ws

  4. Enter a Fallback Source Stream HLS playback URL to be used by mobile devices or in the event that WebSocket connection attempts fail. The HLS playback URL is available if you enable HLS when creating the ultra low latency stream target. For example,

    https://[wowzasubdomain]-i.akamaihd.net/hls/live/507400
    /0P1q1UHJEN1RzbXdRVGszMHoxWm15f33/playlist.m3u8

    Note: Ultra low latency streams are subject to a default viewer limit of simultaneous viewers per stream according to the subscription plan you select. If this limit is exceeded, new stream viewers will receive an error and won't be able to establish a connection. If you have enabled and configured HLS as a backup for playback, ultra low latency stream viewers beyond the allotted limit can view the steam via the fallback HLS connection. See Wowza Streaming Cloud REST API limits for more information about limits.
  5. Enter a Title and Description that will appear on the player, and adjust the player Size options if desired.
  6. Click Player Options, and then select or edit any of the Playback Options and add a video poster image if desired.
  7. If desired, click Advanced and enter custom properties and their values. For available custom properties see Customize Wowza Player with configuration properties.
  8. Click Update Preview and then click the Play button in the player preview to test your settings.

    When you're satisfied with your player settings, get the HTML embed code and prepare your webpage to include it.
  9. Click Get Embed Code.
  10. Copy the JavaScript from the first field, JS Includes, and paste it into the HEAD section of your webpage.
  11. Copy the HTML DIV element from the second field, Create an HTML element to contain your video, and paste it at the top of the BODY section of your webpage.
  12. Copy the code from the third field, Embed the Wowza Player, into the BODY section of your webpage after the HTML player element DIV element.

 

Example HTML webpage with Wowza Player embed code


When you're done, a basic HTML webpage will look something like this:

<html>

<head>

   <title>My Wowza Player Ultra Low Latency Stream Page</title>
   <script type="text/javascript" src="//player.wowza.com/player/latest/wowzaplayer.min.js"></script>

</head>

<body>

<div id="playerElement" style="width:100%; height:100%; padding:0 0 56.25% 0"></div>

<script type="text/javascript">
WowzaPlayer.create("playerElement",
    {
    "license":"[Your-30-character-player-license]",
    "sources":[{
    "sourceURL":"[Your WebSocket playback URL]" 
    },
    {
    "sourceURL":"[Your fallback HLS playback URL]"
    }],
    "title":"[The title you specified to appear on the player]",
    "description":"[The description you specified to appear on the player]",
    "autoPlay":false,
    "mute":false,
    "volume":75
    }
);
</script>

<body>

</html>

More resources