Embed Wowza Flowplayer in your site as a Wowza Streaming Engine with Wowza Video user

Wowza Flowplayer is bundled into a Wowza Video subscription as the default player for streams with no need for a third-party player. While Wowza Video generates embed codes and hosted pages for a live stream, there are some use cases that require you to manually insert Wowza Flowplayer code into your site for use with Wowza Video streams.

• Wowza Video advanced customization of the player included with a live stream — 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. This implementation works great if you don't want to customize the player. But, if you want functionality beyond what the player in the embed code offers, you'll manually add a customizable instance of Wowza Flowplayer to your site and use that with your Wowza Video live stream. If you're not a Wowza Streaming Engine with Wowza Video user, but have a Wowza Video subscription, for instructions on how to embed the player and customize it, see our Embed and Customize Wowza Flowplayer article using the 1.x API or the Embed an Customize Wowza Flowplayer article using the 2.x API.
• Wowza Streaming Engine with Wowza Video customers who use Wowza Flowplayer — If you're a Wowza Streaming Engine with Wowza Video customer who utilizes Wowza Video's content delivery network (CDN) to deliver streams, your Wowza Video subscription gives you access to Wowza Flowplayer. If you want to use Wowza Flowplayer for stream playback, you can manually add a customizable instance of Wowza Flowplayer to your site.

The steps on this page walk you through manually adding an easily customizable instance of Wowza Flowplayer to your site's HTML to use with Wowza Video streams. These instructions are for Wowza Streaming Engine with Wowza Video customers only.

If you're not using Wowza Video, you'll follow different instructions.

Before you start

You should have access to the following items:

• A Wowza Video account or a free trial account with a Wowza Video subscription.
• A Wowza Streaming Engine license.
• A video source (camera or encoder).

You should complete the following task:

• Create a stream target through Wowza Streaming Engine. You'll need to decide if you're using a push or pull workflow . You'll use the playback URL that's created for the stream target later in this tutorial.

1. Embed the player in your site

After you've created a stream target, embed the player into your site by adding the following code directly to your site and referencing your Wowza Video playback URL.

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 Flowplayer as well as the basic and HLS JavaScript code for player functionality. These are the minimum components for most players.

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_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 stream's playback URL. We'll update that in the next step.
   • The token attribute licenses your instance of Wowza Flowplayer. Use the token value, in the above code, any time you create a player manually for your stream. This token is only valid for Wowza Video streams.
3. Update the src value to point to your playback URL for the Wowza Video stream you created earlier.

   a. If you created a stream target for a push workflow, locate and copy the Playback URL found on the stream target's page in Wowza Streaming Engine. If you used the pull workflow, you'll log into Wowza Video to locate and copy the HLS Playback URL.

   See these topics for more help finding your HLS playback URL: Push streams to Wowza CDN from Wowza Streaming Engine and Pull streams from Wowza Streaming Engine to Wowza CDN.
   

   b. In the code on your site, replace the src value, YOUR_PLAYBACK_URL, with the value you just copied.

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>

2. Customize and test the player

Next, you can configure or customize the player to support your viewers, use cases, or branding. Last, test your customizations by starting your live stream at both the encoder and your streaming mechanism, and make sure it's playing as expected on your site.

Alternate ways to create a customizable instance of Wowza Flowplayer

In Embed the player in your site, we described the lightest weight approach to embedding a customizable instance of Wowza Flowplayer, using code hosted on the Flowplayer CDN. There are two other approaches you could use and choosing between all approaches depends on your familiarity with web development and your use case.

• Use player code hosted on the Flowplayer CDN — Used above.
• Host player components on your own server or chosen CDN .
• Use NPM .

We'll describe hosting components on your own server or chosen CDN and using NPM below.

Host player components on your own server or chosen CDN

To implement this approach, you should have a good understanding of web development, including web hosting and CDN usage.

You can download and extract the files of the current stable channel and then host them on your server or your preferred CDN: https://cdn.flowplayer.com/releases/native/3/stable/flowplayer.zip.

As you're implementing Wowza Flowplayer, when prompted to:

• Configure the player with your token you'll use.
• Specify the src .

See the Embed the player in your site section in this article for more information about adding the token and src.

Use npm

To implement this approach, you should know how to work with npm, as well as have a good understanding of web development.

To install the latest stable build, use either yarn or npm to install:

yarn add @flowplayer/player

npm install @flowplayer/player

When using NPM, there's no global flowplayer exported. You need to import the player:

flowplayer("#my-selector", myConfiguration)

To use plugins from NPM, you need to import them manually and register by hand:

import flowplayer from @flowplayer/player
import MessagePlugin from @flowplayer/player/plugins/message
import SharePlugin from @flowplayer/player/plugins/share

flowplayer(MessagePlugin, SharePlugin) // Plugins are now registered

As you're implementing Wowza Flowplayer, when prompted to:

• Configure the player with your token you'll use.
• Specify the src .

See the Embed the player in your site section in this article for more information about adding the token and src.