For Wowza Video subscribers, we added Wowza Flowplayer, an easy-to-use, commercial-grade video player designed for builders and developers. The player integrates into your browser through HTML5 and provides HLS and MPEG-DASH playback on most browsers and devices through either a Wowza Video hosted page or your own site. Highly customizable and lightweight, Wowza Flowplayer enables innovative and scalable video playback for many use cases.
Note: You're a subscriber if you have access to Asset Management and Historic and Live Analytics in the Wowza Video user interface.
The player is bundled into Wowza Video subscription as the default player for live streams with no need for a third-party player. When you create a live stream, Wowza Video uses Wowza Flowplayer for both the hosted page and in an embed code you can use on your own site. While you can customize the appearance of the player and include video playback through Airplay and Chromecast within Wowza Video, Wowza Flowplayer has additional functionality that hasn't been incorporated into the Wowza Video REST API yet. If you want to customize the player beyond what Wowza Video currently offers, you'll manually add the Wowza Flowplayer JavaScript and plugins you want to use to your site and use that customized player with your live stream's playback URL.
The steps on this page walk you through manually adding an easily customizable instance of Wowza Flowplayer to your site. You can then customize the user interface of Wowza Flowplayer using CSS and modify the player's default behavior with JavaScript (JS).
You can customize the player through:
- CSS
- 30+ plugins that provide enhanced capabilities, including video playback through Airplay and Chromecast
- Web components, including custom components you create
- The Player API
- SDKs for broad support of iOS, tvOS, and Android
This article explains how to embed a customizable instance of Wowza Flowplayer in your site's HTML, and then how you can customize that instance.
Before you start
- API authentication methods. We use JSON web tokens for API authentication. See Authentication for more information.
- Environment variables. We use environment variables for the API version and your JWT in the cURL API request examples in this topic to make it easier for you to copy, paste, and run commands in your Terminal or Command Prompt window. If you don't set environment variables for these values, you'll need to manually enter the correct values in the code samples throughout this tutorial. See Tools for testing the API for instructions.
You should have access to the following items:
- A Wowza Video account or a free trial account with a Wowza Video subscription.
- A video source (camera or encoder).
You should complete the following tasks:
- Create a live stream with Wowza Flowplayer specified as the player for the stream. View our Start Livestreaming Using the Wowza Video REST API topic to learn how to create a live stream. You'll need the id returned in the response for the steps in this article.
1. Get the HLS playback URL for your stream
Step 2 will walk you through embedding the player in your page, but you'll need the hls_playback_url for your live stream first so you can insert it into the embed code.
Fetch the live stream by its ID by sending a GET request to the /live_streams/{id} endpoint.
Sample request
curl -X GET \
-H "Content-Type: application/json" \
-H "Authorization: Bearer ${WV_JWT}" \
-X "${WV_HOST}/api/${WV_VERSION}/live_streams/{id}"
Sample response
The response includes:
- hls_playback_url you'll use in the next step to embed the player into your site. You'll find the URL inside the player object.
{
"live_streams": {
"id": "8bwzg5vj",
"name": "User authenticated live stream",
"transcoder_type": "transcoded",
"billing_mode": "pay_as_you_go",
"broadcast_location": "us_west_california",
...
"encoder": "other_rtmp",
"delivery_method": "push",
"target_delivery_protocol": "hls_https",
...
},
"player: {
"id": "zxn5prrj",
"type": "wowza_video_player",
...
"embed_code": "div id='wowza_player'></div\n<script id='player_embed' src='//player.video.wowza.com/hosted/zxn5prrj/wowza.js' type='text/javascript'></script>\n",
"hls_playback_url": "https://[subdomain].wowza.com/[stream_id]/[stream_name]/hls/live/playlist.m3u8",
}
"hosted_page": {
"enabled": true,
...
}
"stream_targets": [
{
"id": "bnlbnb8p"
}
],
...
}
2. Embed Wowza Flowplayer in your site
After you've created a live stream, embed the player into your site. This article assumes you want to customize Wowza Flowplayer on your site with functionality beyond what the player in the live stream's embed code offers.
To embed a player you can easily customize, you'll add the following code directly to your site and reference your live stream's HLS playback URL.
Alternative: This step uses the lightest weight approach to embedding a customizable instance of Wowza Flowplayer, using code hosted on the Flowplayer CDN. If you are familiar with web development, CDNs, and NPM, you can use one of the more technical approaches if that better fits your use case. See Alternate ways to create a customizable instance of Flowplayer for more information.
- Add the minimum player components, in CSS and JavaScript, to your site.
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css"> <script src="https://cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script> <!-- Optional plugins --> <script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
These references add the CSS for Flowplayer as well as the basic and HLS JavaScript code for player functionality. These are the minimum components for most players. Later in this topic you'll learn how you can add more plugins to customize your player for any use case.
- Add the following HTML code to your site to create an instance of Wowza Flowplayer.
<div id="player_container"></div> <script> flowplayer('#player_container', { src: "YOUR_HLS_PLAYBACK_URL", token: "eyJraWQiOiIwWE44RnRTYkQxblYiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6MzgsXCJpZFwiOlwiMFhOOEZ0U2JEMW5WXCJ9IiwiaXNzIjoiRmxvd3BsYXllciJ9.wHlyQZ86rIHD8ldgnpiWbmFBmR4zt_3FSj78GMk7lfQ1es7K8y0MuHzbqcJfp0lm6LcUbUkQ5PsazIsAybxivg" }) </script>- The div tag is where your player will render on the page.
- The src attribute will point to your live stream's HLS playback URL. We'll update that in the next step.
- The token attribute licenses your instance of Wowza Flowplayer. You can use this token value any time you create a player manually for your live stream. However, the token is only valid for streams created in Wowza Video and that use the Wowza CDN, like your live stream.
- Update the src value to point to your HLS playback URL that you retreived previously.
A simple HTML page with a basic Wowza Flowplayer instance embedded would look similar to the following:
<!DOCTYPE html>
<html>
<head>
<title>My live stream</title>
<link rel="stylesheet" href="https://cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
<script src="https://cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<!-- Optional plugins -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
</head>
<body>
<h1>Welcome!</h1>
<p>We'll be streaming in just a few moments.</p>
<div id="player_container"></div>
<script>
flowplayer('#player_container', {
src: "https://cdn3.wowza.com/1/d0M3a0ZpMW02dUZy/ID/hls/live/playlist.m3u8",
token: "eyJraWQiOiIwWE44RnRTYkQxblYiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6MzgsXCJpZFwiOlwiMFhOOEZ0U2JEMW5WXCJ9IiwiaXNzIjoiRmxvd3BsYXllciJ9.wHlyQZ86rIHD8ldgnpiWbmFBmR4zt_3FSj78GMk7lfQ1es7K8y0MuHzbqcJfp0lm6LcUbUkQ5PsazIsAybxivg"
})
</script>
</body>
</html>
Next, you can customize the player to support your viewers, use cases, or branding.
3. Customize Wowza Flowplayer
After you've embedded a customizable instance of Wowza Flowplayer in your site, you can customize the default player UI through CSS code and change the player's behavior through JavaScript.
The player is optimized for most browsers, mobile devices, and tablets. As seen in the following image, the default UI includes:
- Responsiveness
- Basic video player controls and functionality
You can customize the player through:
- CSS
- 30+ plugins that provide enhanced capabilities, including video playback through Airplay and Chromecast
- The Player API
- Web components, including custom components you create
- SDKs for broad support of iOS, tvOS, and Android
The next sections will describe these customizations options in more detail.
Note: Because Wowza Flowplayer is built using Flowplayer, the links in the customization section go to Flowplayer's product documentation.
Also, Flowplayer's demo page is a great resource for code examples of some common use cases.
CSS
Some of the customizations you can make to the player's default UI through CSS include:
These are only a few of the possibilities for customization. Explore more Wowza Flowplayer customization possibilities.
Plugins
Wowza Flowplayer includes 30+ plugins providing enhanced capabilities to the player, including video playback through Airplay and Chromecast. For example, you can use the Airplay plugin to implement the feature that allows you to play content on Airplay devices. An Airplay device selection button appears when Airplay devices are available in the same WiFi network. For more information on plugins, refer to Plugins.
Player API
Wowza Flowplayer can interact with your viewer’s browser and external services via JavaScript. For example, you may wish to gather viewer performance metrics and report them to an analytics platform or may choose to react to events triggered by the player elsewhere in your page. For more information on the player, refer to the Player API.
Web components
Web components let you to modify the player's UI to give a custom feel to it, as well as replace elements or re-group items in a custom menu. You can also add your own custom web components. For more information on web components, refer to Web components.
SDKs
Wowza Flowplayer offers support with SDKs for:
- iOS — A native media player, written entirely in Swift, this SDK provides an easy-to-use API that helps developers to create beautiful iOS applications that play audio and video both locally and over the Internet. The SDK uses AVPlayer as its core. The SDK supports adaptive streaming technologies such as HLS, as well as the most popular single container formats, such as MP4, MP3, AVI, and several more.
- Android — A native media player, written entirely in Kotlin, this SDK provides an easy-to-use API that helps developers to create beautiful Android applications that play audio and video both locally and over the Internet. It uses ExoPlayer in its core. The SDK supports adaptive streaming technologies such as DASH, HLS, and SmoothStreaming, and the most popular single container formats, such as MP4, MP3, WebM, and several more.
- tvOS — A fully-fledged media manager that handles every aspect of media playback, ads and state. It uses AVPlayer at its core. The SDK supports adaptive streaming technologies such as HLS, as well as the most popular single container formats, such as MP4, MP3, AVI, and several more.
4. Test your customizations
Start your live stream (both the encoder and in Wowza Video), and make sure it's playing as expected on your site.
