Embed Wowza Flowplayer in your site without Wowza Video

This article assumes you want to customize Wowza Flowplayer on your site. You can manually add a customizable instance of Wowza Flowplayer to your site's HTML. Use the instructions on this page if you're not using Wowza Video for the stream in the player. If you're using Wowza Video, follow these instructions.

1. Embed the player in your site

To embed a player in your site that you can easily customize, add the following code directly to your site.

Info

This section uses the lightest weight approach to embedding a customizable instance of Wowza Flowplayer, using code hosted on the Flowplayer CDN. If you're familiar with web development, CDNs, and Node Package Manager (npm), you can use one of those more technical approaches. 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>
<!-- Optional plugins -->
<script src="https://cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>

The previous code snippet adds the CSS for Flowplayer and the basic and HLS JavaScript code for player functionality. These are the minimum components for most players.

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_FILEPATH_URL",
     token: "YOUR_UNIQUE_TOKEN"
    })
   </script>
```
- The div tag determines where your player renders on the page.
- The src attribute points to your live stream's file path. We'll update that in the next step.
- The token attribute licenses your instance of Wowza Flowplayer. We'll update that in the next step.
Update the src value to point to your live stream's file path.
Update the token value with the unique token that was sent to you after buying Wowza Flowplayer as a standalone purchase. Standalone means you did not purchase the player as part of a Wowza Video subscription. You can use this token value any time you create a player manually for your live stream.

A simple HTML page with a basic Wowza Flowplayer instance embedded looks 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.fastly.com/1/d0M3a0ZpMW02dUZy/ID/hls/live/playlist.m3u8",
      token: "xdkgfjdkjslasdfjaslk"
    })
    </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 the Embed the player in your site section, we described the easiest way to embed a customizable instance of Wowza Flowplayer, using code hosted on the Flowplayer CDN. There are two other approaches you could use. Choosing between these methods 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 .

Info

We recommend the first two approaches before using npm. However, the option is available for those who need it.

In the following sections, we describe how to host components on your own server or chosen CDN and how to use npm.

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:

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. The player assets exist on npm under the @flowplayer/player package. To install the latest stable build, use either yarn or npm to install:

yarnnpm

Copy

Copied

yarn add @flowplayer/player

Copy

Copied

npm install @flowplayer/player

info

If you use npm to install the player assets and plan to incorporate different languages within the player UI, you must also use npm to add the Translations npm package.

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

Copy

Copied

import flowplayer from @flowplayer/player

flowplayer("#my-selector", myConfiguration)

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

Copy

Copied

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:

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.