Embed and customize Wowza Flowplayer in your site using the Wowza Video REST API

For Wowza Video subscribers, we've 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.

Info

This topic only applies to version 2.x of the REST API. Go to Embed and Customize Wowza Flowplayer for 1.x embed and customization instructions.

The player is bundled into Wowza Video as the player for live streams and videos with no need for a third-party player. When you create a live stream or video, Wowza Video uses Wowza Flowplayer for both the hosted page and in an embed code you can use on your own site. If you'd like to simply use the embed code from the Wowza Video user interface in your site, see the Share a Video in Wowza Video article or the Go Live with Wowza Video, Set Up your Viewing Experience article and section to view the code and implement the player.

This article is for those who want to add their player customization outside of the platform UI. You can manually add an easily customizable instance of Wowza Flowplayer to your site where you can customize the Wowza Flowplayer user interface using HTML and CSS and modify the player's default behavior using JavaScript.

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

You should be familiar with the following concepts:

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 Wowza Video live stream or add a video into Wowza Video. View our Start Livestreaming Using the Wowza Video REST API topic to learn how to create a live stream. View our Upload a Video Stored Locally Using the Wowza Video REST API to learn how to upload a video into Wowza Video. You'll need the live stream or video id returned in the response for the steps in this article.

1. Create a player token

Player tokens are required if you don't want to deploy the JavaScript embed code generated by Wowza Video that is available when you share a video, live stream, or playlist. The token authorizes use of the player.

To create a player token:

Click Tokens under Players in the navigation of the Wowza Video application.
Click New token .
Enter a name for the token.
Optionally, enter up to two domains you want to restrict playback to. If you don't enter any domain, the token will be usable anywhere. The domain restriction is encoded into the token and cannot be changed after it's created.
Click Create token .
Hover over the token, then click to copy it.

2. Embed Wowza Flowplayer in your site

After you've created a live stream or video and a player token, embed the player into your site. This article assumes you want to customize Wowza Flowplayer on your site with functionality through CSS, plugins, and other developer tools.

To embed a player you can easily customize, you'll add the following code directly to your site and reference your live stream or video id from when you created the live stream or uploaded the video.

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.

Copy

Copied

<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>
<!-- load HLS plugin as platform videos default to HLS -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<!-- load Wowza Video Platform Integration plugin so your live stream or video id can be leveraged  -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/ovp.min.js"></script>
<!-- Optional plugins -->

These references add the CSS for Wowza Flowplayer, the basic and HLS JavaScript code for player functionality, and allows you to use the live stream or video id and it's related items (stream url, etc.) from Wowza Video. 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.
Copy

Copied
```
<div id="player_container"></div>

<script>
    flowplayer('#player_container', {
      src: "YOUR_LIVE_STREAM_OR_VIDEO_ID",
      token: "YOUR_PLAYER_TOKEN"
    })
    </script>
```
- The div tag is where your player will render on the page.
- The src attribute points to your live stream's or video's id from live stream creation or video upload.
- 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 or video.

A simple HTML page with a basic Wowza Flowplayer instance embedded would look similar to the following:

Copy

Copied

<!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>
<!-- load HLS plugin as platform videos default to HLS -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>
<!-- load Wowza Video Platform Integration plugin so your live stream or video id can be leveraged  -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/ovp.min.js"></script>
<!-- Optional plugins -->
</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: "YOUR_LIVE_STREAM_OR_VIDEO_ID",
      token: "YOUR_PLAYER_TOKEN"
    })
    </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.

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) or share your video, and make sure it's playing as expected on your site.

More resources

Get started with Wowza Video