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

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.

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

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:

You should complete the following tasks:

1. Get the HLS playback URL for your stream

Step 3 below 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

Endpoint Reference

Copy
Copied
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 next steps to embed the player into your site.
Copy
Copied
{
  "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",
    ...
    },
    "hls_playback_url": "https://[subdomain].wowza.com/[stream_id]/[stream_name]/hls/live/playlist.m3u8",
    "hosted_page": {
       "enabled": true,
        ...
        }
    "stream_targets": [
      {
        "id": "bnlbnb8p"
      }
    ],
    ...
}

2. Create a player token

Player tokens are required if you don't want to deploy the iframe, hosted page, or JavaScript embed codes generated by Wowza Video that are available when you share a video, live stream, or playlist, but intend to set up a standalone JavaScript based setup. The token authorizes use of the player.

To create a player token:

  1. Click Tokens under Players in the navigation of the Wowza Video application.
  2. Click New token .
  3. Enter a name for the token.
  4. 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.
  5. Click Create token .
  6. Hover over the token, then click to copy it.

3. Embed Wowza Flowplayer in your site

After you've created a live stream and a player token, 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.

  1. 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>
<!-- Optional plugins -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>

    These references add the CSS for Wowza 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.

  2. 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_HLS_PLAYBACK_URL",
      token: "YOUR_PLAYER_TOKEN"
    })
    </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.
  3. Update the src value to point to your HLS playback URL that you retrieved previously.

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>
<!-- 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: "eyTraWQiOiIwWE44RnRTYkQxblYiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6MzgsXCJpZFwiOlwiMFhOOEZ0U2JEMW5WXCJ9IiwiaXNzIjoiRmxvd3BsYXllciJ9.wHlyQZ86rIHD8ldgnpiWbmFBmR4zt_3GSj78GMk7laQ1es7K8y0MuHzbqcJfq0lm6LcUbUkQ5PsazIsAybxivg"
    })
    </script>

</body>
</html>

Next, you can customize the player to support your viewers, use cases, or branding.

4. 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.

5. 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.

More resources

© 2007-2024 Wowza Media Systems, ™ LLC. All rights reserved.   Security & Privacy Policy | Legal | System Status