Get started with Wowza Player

Wowza Media Systems™ offers player software called Wowza™ Player, a lightweight HTML5 player that plays HLS streams or ultra low latency streams on any device—including mobile phones and desktop computers. Wowza Player supports the latest version of most modern web browsers such as Google Chrome, Firefox, Safari, and Microsoft Edge. It also supports Flash playback on older browsers that don't support HTML5. The player comes with an easy-to-use, web-based Player Builder for fast, simplified Wowza Player setup, customization, and configuration. Use this article to learn how to use Wowza Player and to quickly and easily generate embed code in Wowza Player Builder.

Notes:
  • Wowza Streaming Engine™ media server software version 4.5.0 (or later) works best with Wowza Player.
  • To build playback capability into iOS and Android apps, use the Wowza GoCoder SDK instead of Wowza Player.

Access Wowza Player


If you have a Wowza account, go to the Wowza Player webpage and sign in. If you're signing into Wowza Player for the first time, select the check box to acknowledge that you've read and agreed to the Wowza EULA and the Wowza Media Systems Privacy Policy documents, and then click Sign In.

If your Wowza account has a pre-existing license for Wowza Streaming Engine media server software or the Wowza Streaming Cloud™ live streaming service, you'll be directed to the Wowza Player Builder webpage where you can access the player and generate player embed code to set up Wowza Player with a custom configuration in your own webpages.

If you don't have a Wowza account, go to the Get Wowza Player webpage to create a new account. Complete the new Wowza account form, and then click Sign Up to be directed to the Wowza Player Builder webpage.
 
Note:
  • If you request a Wowza Streaming Cloud trial or purchase a Wowza Streaming Cloud plan, you'll also get license keys for Wowza Player automatically. To access the player, sign into the Wowza Player Builder webpage using your Wowza account for Wowza Streaming Cloud.
     

Learn the Wowza Player user interface


The Wowza Player interface is what your users see when you embed Wowza Player into a website. It consists of an Action bar at the top of the player with a watermark, title, and description. At the bottom of the player, a Seek bar shows the elapsed play time of the stream, and a Control bar allows your viewers to manipulate playback options. You can display a title card and messages about the stream in the player interface.


 
Control bar function Icon Description
Play/Pause Start and pause the video or audio stream.
Quick Rewind Rewind video or audio playback by the number of seconds set in the player embed code. The default value is 30 seconds.
Volume/Mute Hover to change the volume level or click to mute.
Full Screen Toggle full screen view.
Bitrate Selector Select the bitrate for viewing the stream.
Seek to LIVE Return video or audio playback to real-time.

Use Wowza Player keyboard shortcuts


If your browser's focus is the player object in the webpage, you can use the following keyboard shortcuts to control video or audio playback.
 
To Press the following key(s)
Play/Pause Space/Enter
Increase/Decrease volume by 10 percent Up/Down Arrow
Rewind/Fast-Forward 15 seconds Left/Right Arrow
Mute/Enable audio M
Enable/Disable full screen F
Seek to the corresponding percentage of time through video playback.
For example, press 4 to skip to the 40-second mark in a
100-second video.
Numbers (0-9)
 
Notes:
  • Using arrow keys or number keys to seek or rewind/fast-forward video playback is only available in on-demand or DVR content.
  • Keyboard controls are only available in the HTML5 Wowza Player. They aren't available to your viewers if their browser chooses to display the Flash Wowza Player as a fallback.

Play streams from Wowza Streaming Engine and Wowza Streaming Cloud


To stream to Wowza Player from Wowza Streaming Engine media server software, you must use Wowza Streaming Engine Manager to create a streaming application with HLS playback enabled. Then you can launch the Wowza Player Builder from within Wowza Streaming Engine Manager. For more information, see Use Wowza Player with Wowza Streaming Engine.

To stream to Wowza Player from the Wowza Streaming Cloud service, you can add a live stream, set up a live video source, and configure playback. For more information, see Use Wowza Player with Wowza Streaming Cloud.

Create a custom Wowza Player with Wowza Player Builder


To create custom player code to embed in a webpage, you can use Wowza Player Builder to configure HLS stream playback or ultra low latency stream playback. The settings that you configure in the Wowza Player Builder user interface are included in the embed code that's generated when you click the Get Embed Code button.

Wowza Player user interface

  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.
  3. Enter your playback URL for the Source Stream. If Wowza Player is loaded over HTTPS, you must provide a secure playback URL. For example:
     
    Video-on-demand stream HLS URL from Wowza Streaming Engine:
    https://[wowza-ip-address]:443/vod/mp4:sample.mp4/playlist.m3u8
    http://[wowza-ip-address]:1935/vod/mp4:sample.mp4/playlist.m3u8

    Live stream HLS URL from Wowza Streaming Engine:
    https://[wowza-ip-address]:443/live/myStream/playlist.m3u8
    http://[wowza-ip-address]:1935/live/myStream/playlist.m3u8

    Live stream HLS URL from Wowza Streaming Cloud:
    https://[wowza-subdomain]/hls/live/123456/abc123de/playlist.m3u8
    http://[wowza-subdomain]/hls/live/123456/abc123de/playlist.m3u8

    Live WOWZ over WebSocket ultra low latency stream URL from Wowza Streaming Cloud:
    wss://edge.cdn.wowza.com/live/_definst_/0I0aBc123deaBc123deaBc123deq5822/stream.ws
    ws://edge.cdn.wowza.com/live/_definst_/0I0aBc123deaBc123deaBc123deq5822/stream.ws
  4. Enter an optional playback URL for the Fallback Source Stream. For example:
     
    Live stream HLS fallback URL from a Wowza Streaming Cloud ultra low latency stream target:
    https://[wowza-subdomain]/hls/live/123456/0I0aBc123deaBc123deaBc123deq5822/playlist.m3u8
    http://[wowza-subdomain]/hls/live/123456/0I0aBc123deaBc123deaBc123deq5822/playlist.m3u8
     
    Note: During each connection attempt, Wowza Player tries to connect to a source URL in the embed code a maximum of three times. If connection to a source fails after three tries, Wowza Player checks to see whether there is a second source URL available in the sources object in the embed code. If a second source is listed, Wowza Player falls back to the second source URL for playback. Adding a Fallback Source Stream in the Wowza Player Builder user interface adds a second source URL to the embed code.
  5. Update the rest of the display and playback settings on the Source Stream Information and Player Options tabs. For more information on these settings, see Player Builder configuration settings for Wowza Player.
  6. Optionally, click Advanced and enter custom properties and their values. For available custom properties see Customize Wowza Player with configuration properties.
  7. Click Update Preview to test your stream settings in the preview window on the right side of the page. 
     
  8. To embed the custom Wowza Player configuration in your webpage, click Get Embed Code, and then copy the following code examples into your webpage:
     
    1. To include the wowzaplayer.min.js file in the webpage, copy the first tag into the HEAD section.
      <script type="text/javascript" src="//player.wowza.com/player/latest/wowzaplayer.min.js"></script>
       
      Note: The most recent version of Wowza Player is used by default, but you can specify and use an earlier version by replacing latest with the version and build numbers. For more information, see Use a specific version of Wowza Player.
    2. To create an HTML element to contain your video, copy the second tag into the BODY section.
      <div id="playerElement" style="width:100%; height:0; padding:0 0 56.25% 0"></div>
      The Size option you selected on the Stream Source Information tab is used here.
       
    3. To embed the player, copy the generated script into the BODY section after the playerElement tag. The following example contains all default Player Builder values and a sample HLS stream URL for an on-demand application named vod and video source named sample.mp4.
      <script type="text/javascript">
      WowzaPlayer.create('playerElement',
          {
          "license":"[wowza-player-license-key]",
          "sources":"[{,
          "sourceURL":"https%3A%2F%2F%5Bwowza-ip-address%5D%3A1935%2Fvod%2Fmp4%3Asample.mp4%2Fplaylist.m3u8",
          },
          {
          "sourceURL":""
          }],
          "title":"My%20Wowza%20Player%20Video",
          "description":"This%20is%20my%20Wowza%20Player%20Video%20description.",
          "autoPlay":false,
          "mute":false,
          "volume":"75"
          }
      );
      </script>

      Where [wowza-player-license-key] is the Wowza Player license key issued to you by Wowza.

    The following example shows all of the code examples in a simple webpage.

    <HTML>
    <HEAD>
    	<title>My Wowza Player Video</title>
    	<script type="text/javascript" src="//player.wowza.com/player/latest/wowzaplayer.min.js"></script>
    </HEAD>
    
    <BODY>
    
    	<div id="playerElement" style="width:100%; height:0; padding:0 0 56.25% 0"></div>
    
    	<script type="text/javascript">
    	WowzaPlayer.create('playerElement',
    		{
    		"license":"[wowza-player-license-key]",
                    "sources":"[{,
                    "sourceURL":"https%3A%2F%2F%5Bwowza-ip-address%5D%3A2Fvod%2Fmp4%3Asample.mp4%2Fplaylist.m3u8",
                    },
                    {
                    "sourceURL":""
                    }],
                   "title":"My%20Wowza%20Player%20Video",
                   "description":"This%20is%20my%20Wowza%20Player%20Video%20description.",
                   "autoPlay":false,
                   "mute":false,
                   "volume":"75"
    		}
    	);
    	</script>
    <BODY>
    </HTML>

    Although less common, it is possible to embed multiple instances of Wowza Player into a single webpage. The following example demonstrates how to embed two players.

    <HTML>
    <HEAD>
        <script type="text/javascript" src="//player.wowza.com/player/latest/wowzaplayer.min.js"></script>
    </HEAD>
    
    <BODY>
    
        <div id="playerElement" style="width:100%; height:0; padding:0 0 56.25% 0"></div>
        <div id="playerElement2" style="width:100%; height:0; padding:0 0 56.25% 0"></div>
    
        <script type="text/javascript">
        WowzaPlayer.create('playerElement',
            {
            "license":"[wowza-player-license-key]",
            "title":"My Wowza Player Video",
            "description":"This is my Wowza Player Video description.",
            "sourceURL":"http://[wowza-ip-address]:1935/vod/sample.mp4/playlist.m3u8"
            }
        );
        </script>
        <script type="text/javascript">
        WowzaPlayer.create('playerElement2',
            {
            "license":"[wowza-player-license-key]",
            "title":"My Wowza Player Video 2",
            "description":"This is my Wowza Player Video 2 description.",
            "sourceURL":"http://[wowza-ip-address]:1935/vod/sample2.mp4/playlist.m3u8"
            }
        );
        </script>
    <BODY>
    </HTML>
 

Player Builder configuration settings for Wowza Player

You can use the following settings to configure Wowza Player. They are found on the Stream Source Information and Player Options tabs in the Wowza Player Builder. When using the Player Builder user interface to construct your embed code, they are added automatically.  You can also manually insert these values into the script as part of the WowzaPlayer object ConfigJSON property.
 
Note: To see additional configuration options that are not integrated into the Player Builder user interface, see Customize Wowza Player with configuration properties. You can add these options in the Advanced tab.
 
Property JSON notation Description
License Key N/A Refreshes the player preview on the right side of the page with the current Player Builder settings.
Source Stream sourceURL The full HLS playback URL of your live or on-demand stream. If using Wowza Streaming Cloud for ultra low latency, the full playback WOWZ over WebSocket URL of your ultra low latency stream.
Fallback Source Stream sourceURL The optional playback URL for fallback in the case that connection to the primary sourceURL fails after multiple attempts to connect. If using Wowza Streaming Cloud for ultra low latency, the full HLS fallback URL associated with your ultra low latency stream target.
Title title Set the title to display in the top-left corner of the player Action bar on mouse hover.
Description description Set the description to appear when the viewer clicks on the video Title. Not available in audio-only mode.
Size width, height (found in DIV HTML element) For more information, see Configure Wowza Player video size.
Autoplay autoPlay Select to enable a source to play automatically. Depending on the browser policy and user settings, you must also select Start muted for autoplay to work as expected. If a browser doesn't support autoplay, Wowza Player falls back to manual playback. See Use autoplay with Wowza Player for more information.
Start muted mute Stream plays with muted audio until the viewer changes the volume.
Starting volume volume Sets the starting volume of the video (the viewer may also adjust the volume in the embedded player). The default value is 75 percent of maximum volume. Volume ranges from 0 to 100.
Display images before the video starts  posterFrameURL Select Display image before the video starts to display a static poster image in the player before the video plays. You should use a link to a JPG or PNG image that is close to the size of the player. A poster image can't be added to the audio-only player.

Configure Wowza Player video size

In the Wowza Player Builder user interface, select Responsive under Widescreen or Standard to make the player resize itself to fit the webpage or container it's in while maintaining the selected aspect ratio. Black bars are added to fill empty space if the size of the video differs from the size of the player. If using Responsive, set the Max width to restrict the maximum size to which the player can be stretched.

Select Custom to enter a width and height that differs from preset values. Note that Wowza Player might not be able to play video that has a Width that's less than 320px.

Available Widescreen preset sizes:

  • 1080p (1920x1080)
  • 768p (1366x768)
  • 720p (1280x720)
  • WSVGA (1024x600)
  • PAL (1024x576)
  • VGA (640x360)
  • QVGA (320x180)

Available Standard preset sizes:

  • 1080i (1440x1080)
  • 720p 720p (960x720)
  • VGA (640x480)
  • QVGA (320x240)

More resources