Wowza Media Systems™ offers player software called Wowza™ Player, a lightweight HTML5 player that plays Apple HLS streams in any browser, on any device. Wowza Player 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.
Getting Wowza Player
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.
- 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.
Introducing the Wowza Player user interface
The Wowza Player interface 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.|
Using 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)|
|Increase/Decrease volume by 10 percent||Up/Down Arrow|
|Rewind/Fast-Forward 15 seconds||Left/Right Arrow|
|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
- 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.
Playing 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 must add a live stream, set up a live video source, and configure playback. For more information, see Use Wowza Player with Wowza Streaming Cloud.
Creating a custom Wowza Player with Wowza Player Builder
To create custom player code to embed in a webpage, you can adjust the settings on the Stream Source Information and Player Options tabs in Wowza Player Builder. All settings on these tabs are included in the embed code that's generated when you click the Get Embed Code button.
- 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 Getting Wowza Player.
- 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.
- 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.
- To embed the custom Wowza Player configuration in your webpage, click Get Embed Code, and then copy the following code examples into your webpage:
- To include the wowzaplayer.min.js file in the webpage, copy the first tag into the HEAD section.
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.
- 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.
- 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.
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.
- To include the wowzaplayer.min.js file in the webpage, copy the first tag into the HEAD section.
Player Builder configuration settings for Wowza PlayerYou can use the following settings to configure Wowza Player. They are found on the Stream Source Information and Player Options tabs in the Player Builder.
|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||The autoplay feature in Wowza Player has been disabled on all platforms to prevent playback issues in browsers that have changed their autoplay policies.|
|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
|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).|
You can add the following properties to your embed code to configure Wowza Player. They are NOT found on the Stream Source Information and Player Options tabs in the Player Builder.
|uiShowDurationVsTimeRemaining||Boolean||Set to true to display the elapsed time of the video in the player on the left side of the Seek bar. Set to false to display the time remaining in the video on the left side of the Seek bar.|
|uiShowBitrateSelector||Boolean||Includes the Bitrate Selector button in the player Control bar if set to true. This allows the viewer to select the desired video bitrate. Bitrate options are compiled from your stream's SMIL file or calculated from the source media if you aren't using a SMIL file. By default, the player selects the highest quality bitrate that works best with the viewer's connection. To learn how to customize the Bitrate Selector menu, see Customize video quality choices for adaptive bitrate streams in Wowza Player.|
|uiShowFullscreen||Boolean||Enables the Full Screen icon in the player interface if set to true.|
|withCredentials||Boolean||Set to true to enable Wowza Player to make cross-site Access-Control requests using credentials such as cookies. This enables Wowza Player to play streams secured with Wowza Streaming Engine SecureToken, Wowza Streaming Cloud token authorization, or Akamai CDN token authentication. To learn more, see Protect streaming using SecureToken in Wowza Streaming Engine or Protect a Wowza CDN stream target with token authorization in Wowza Streaming Cloud.|
Configuring Wowza Player video sizeSelect 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)
Additional Flash settings for Wowza PlayerYou can add the following properties to your embed code to configure Flash videos in Wowza Player. They are NOT found on the Stream Source Information and Player Options tabs in the Player Builder.
|license||String||Your Wowza Player license key (with dashes).|
|uiBackgroundColor||String||Sets the Flash video RGB background color. Default value is #000000 (black). This color is seen if the player applies letterboxing (spacing) to the video.|
|flashWmode||String||Sets the Flash video Window Mode for transparency, layering, positioning, and rendering in the browser. Options are window, direct, opaque, transparent, and GPU. The default value is direct.
Note: The direct option isn't compatible with Flash objects within a Bootstrap modal in Firefox. Use either opaque or transparent instead.
|flashQuality||String||Sets the Flash video quality. Options are low, autolow, autohigh, medium, high, and best. The default value is high.|
|useHardwareDecoding||Boolean||Uses graphics hardware to accelerate rendering, removing some burden from the CPU. The default value is true. This may be unavailable on certain platforms, browsers, or when certain flashWmode options are enabled.|
|startTime||Integer||The time, in milliseconds, to begin clip playback. Set to 0 to play from the original start of the clip.|
|endTime||Integer||The time, in milliseconds, to end clip playback. A value of -1 specifies no clip end time.|
|abrAutoSwitching||Boolean||Toggles between manual and automatic adaptive bitrate switching. The default value is true, which makes Wowza Player select the highest quality bitrate that works best with your viewers' connections.|
|debugLevel||String||Specifies the error message type to display in the browser console. OFF, ERROR, WARN, INFO, DEBUG. The default value is INFO.|
|abrStartingBitrate||String||Determines how the player dynamically selects a bitrate when the stream begins (first, lowest, or highest). The default value is first.|
For more information on these settings, see Apply OBJECT and EMBED tag attributes in Adobe Flash Professional.
Customizable strings for Wowza Player localizationYou can use the following properties to change labels and messages that appear in the player UI for localization purposes. They are NOT found on the Stream Source Information and Player Options tabs in the Player Builder.
|stringAuto||Auto||Label for the option in the Bitrate Selector menu that allows the player to dynamically select the optimal bitrate based on the viewer's connection.|
|stringBuffering||Buffering...||Message displayed when the stream is buffering.|
|stringCountdownTimerLabel||Time until show||Message displayed above the stream event's countdown timer.|
|stringErrorStreamUnavailable||Stream Unavailable||Message displayed when the player experiences an error with the stream (for example, when stream URL is incorrect).|
|stringErrorCORSStreamUnavailable||Stream unavailable. Check cross-origin policy||Message displayed when a CORS error occurs when loading a stream. This typically means that Cross-Origin headers aren't enabled for Apple HLS streams in the Wowza Streaming Engine application. For details, see How to enable cross-origin resource sharing (CORS) for HTTP-based connections.|
|stringLiveLabel||LIVE||Label to indicate live events in the player's Control bar.|
|stringLiveEventEnded||This live event has ended.||Message displayed when the player detects that a live streaming event has ended.|
|stringLiveSeekAlt||Seek to LIVE||Message displayed on mouseover when using DVR feature during a live broadcast.|
Viewing 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.
Getting 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 forumYou 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 WowzaSometimes 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.