How to configure Wowza Player for ultra low latency streams

Learn how to use the Wowza Player Builder for Ultra Low Latency 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:

Contents


Configure playback with Wowza Player Builder
Example HTML webpage with Wowza Player embed code
More resources

Configure playback with Wowza Player Builder


  1. Go to the Wowza Player Builder for Ultra Low Latency.
  2. When prompted, enter the license key for your Wowza services and then click Apply.

    Hint: You can prepopulate the License KeyStream Source, and Backup Stream Source (if HLS is enabled) information by navigating to the Wowza Player Builder for Ultra Low Latency 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 for Ultra Low Latency with prepopulated fields.
  3. In the Source Stream Information area, for Stream Source, enter the WebSocket playback URL for your ultra low latency stream target. 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 Backup Stream Source 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 with the Wowza Streaming Cloud REST API. For example,

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

    Note: Ultra low latency streams are subject to a default maximum viewer limit of 5,000 simultaneous viewers per stream. 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.
    For available custom properties see Customizable strings for Wowza Player localization as well as these properties:
    Property Type Description
    audioOnly Boolean Determines whether to use the audio-only version of Wowza Player for Ultra Low Latency.
    uiPosterFrameFillMode String Enter fit to resize the poster image so the larger side of the image matches the size of the player, ensuring the entire image fits within the player (black bars may appear to fill extra space).

    Enter fill to resize the poster image so the shorter side of the image matches the size of the player, ensuring the image fills the entire player.

    The aspect ratio of the image is maintained in both settings.

  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.

  1. Click Get Embed Code.
  2. Copy the JavaScript from the first field, JS Includes, and paste it into the HEAD section of your webpage.
  3. 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.
  4. 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 Preview Ultra Low Latency Stream Page</title>
   <script type="text/javascript" src="//player.wowza.com/player/preview/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 backup 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