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—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.
Access 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.
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)|
|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.
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
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.
- 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.
- 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 Streaming Engine 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.
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.
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 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.
|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
|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).|
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.