Get started with Wowza Player

Wowza Media Systems™ offers player software called Wowza™ Player, a lightweight HTML5 player that plays Apple HLS streams or ultra low latency streams on any device. 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.

Note: Wowza Streaming Engine™ media server software version 4.5.0 (or later) works best with 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.
 
Notes:
  • 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.
     
  • If you have more than one license key for the Wowza Player software, they'll be listed in a Choose your license key box in Wowza Player Builder, where you can select the license key that you want to use.

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 Apple 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 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 for HLS stream playback or Wowza Player Builder for Ultra Low Latency for ultra low latency stream playback.

See the steps below to learn how to adjust the settings in Wowza Player Builder. All settings are included in the embed code that's generated when you click the Get Embed Code button.

See Configure Wowza Player for Wowza Streaming Cloud ultra low latency streams to learn how to adjust the settings in Wowza Player Builder for Ultra Low Latency.



 

  1. Sign in to the Wowza Player Builder webpage. If you have more than one license key for Wowza Player software, under Stream Source Information, select the license key you want to use in Choose your license key.
     
    Note: Most users are issued one license key for Wowza Player software. The option to choose a license key isn't available if you have a single license key. For licensing details, see Access Wowza Player.
  2. On the Stream Source Information tab in Player Builder, enter your Apple HLS stream URL in Stream source (HLS). For example:
     
    On-demand stream URL for iOS: http://[wowza-ip-address]:1935/vod/mp4:sample.mp4/playlist.m3u8

    Live URL for iOS: http://[wowza-ip-address]:1935/live/myStream/playlist.m3u8

    Where [wowza-ip-address] is the IP address of your Wowza media server.
     
  3. Update the rest of the display and playback settings on the Stream Source Information and Player Options tabs and then click Update Preview to test your stream settings in the preview window on the right side of the page. For more information on these settings, see Player Builder configuration settings for Wowza Player.
     
  4. 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 Apple 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]",
          "title":"My%20Wowza%20Player%20Video",
          "description":"This%20is%20my%20Wowza%20Player%20Video%20description.",
          "sourceURL":"https%3A%2F%2F%5Bwowza-ip-address%5D%3A1935%2Fvod%2Fmp4%3Asample.mp4%2Fplaylist.m3u8",
          "autoPlay":false,
      
          "volume":"75",
          "mute":false,
          "loop":false,
          "uiShowQuickRewind":true,
          "uiQuickRewindSeconds":"30"
          }
      );
      </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]",
    		"title":"My Wowza Player Video",
    		"description":"This is my Wowza Player Video description.",
    		"sourceURL":"http://[wowza-ip-address]:1935/vod/sample.mp4/playlist.m3u8",
    
                    "autoPlay":false,
    		"volume":"75",
    		"mute":false,
    		"loop":false,
    		"audioOnly":false,
    		"uiShowQuickRewind":true,
    		"uiQuickRewindSeconds":"30"
    		}
    	);
    	</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 available in the Player Builder user interface, see Customize Wowza Player with configuration properties.
 
Property JSON notation Description
Update Preview N/A Refreshes the player preview on the right side of the page with the current Player Builder settings.
Stream URL (HLS) sourceURL The full Apple HLS URL of your live or on-demand stream.
This is an audio-only stream audioOnly Select to use the audio-only version of Wowza Player.
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 Configuring 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.
Loop loop Replays the video after it ends.
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-100.
Display images before the video starts and after the video ends posterFrameURL, endPosterFrameURL Select Display image before the video starts and after the video ends to display a static poster image in the player when the video isn't playing or paused. You can link to one or two different images that are placed on the player before you click Play, after the video ends, or both. You should use JPG and PNG images that are close to the size of the player. Poster images can't be added to the audio-only player.
Image Scaling Mode uiPosterFrameFillMode Select 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).

Select 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.
Show Quick Rewind uiShowQuickRewind
uiQuickRewindSeconds
Select to include the Quick Rewind button on the embedded player Control bar. By default, this rewinds video playback by 30 seconds (or by a custom value).

Configue 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)

View stream analytics


Click the Analytics tab at the top of the Wowza Player Builder page to access playback session data gathered by the player instance you set up in Player Builder.



First, use the menus at the top of the page to narrow the data to playback sessions that occurred between a specific date or time range. If you have more than one Wowza Player license key, you can narrow the data to streams that belong to a single license key. Click Show to view the following types of playback data:

Playback Sessions Over Time: Use the graph to view stream playback trends over time and move your pointer over the graph points to view the number of plays on each date. Sort the table by date or number of playback sessions. By default, this section shows daily totals of all streams played in your Wowza Player.

Playback Sessions by Stream URL: Click the Filter button next to a stream URL in the table to view playback data for that stream only. Sort the table by the number of playback sessions or URL name. Use the Search to refine the stream URLs listed in the table.

Get help with Wowza Player


When requesting help with Wowza Player, we recommend you know your player type and version number. On the Player Builder page or your webpage, right click on the player object. If the Flash version of the player is running, you will see a Flash-based pop-up menu. Both Flash and HTML5 player pop-up menus include the player version number.



There are two ways you can find help with Wowza Player:

Look for an answer in the Wowza Player forum

You can get help from Wowza experts around the world in our Wowza Player forum. Search for an answer, post your question, or answer other users' questions.  

Get technical support from Wowza

Sometimes you need a helping hand. Wowza technical support engineers around the world are available to help you achieve streaming success with Wowza Player. If you need help with Wowza Player or Wowza Player Builder, contact Wowza Technical Support. Be sure to choose the webform for the Wowza software or service that's delivering the stream to your Wowza Player.
   
When describing your Wowza Player in the ticket webform, be sure to select Wowza Player in the Area list so that your issue can be addressed most efficiently by a Wowza technical support engineer.
 
Note: To learn about the variety of support resources that we offer to our user community, see the Wowza Product Support Portal.

More resources