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

The Wowza Video Player leverages a robust, industry standard player that provides HTML5, HLS, and MPEG-DASH playback and plays streams on any browser and device through either a Wowza Video hosted page or your own site. You can customize the player when you embed it in your site to maintain, for example, your own branding across all digital properties.

The Wowza Video Player is the default player included with a Wowza Video subscription. You're a subscriber if you have access to Asset Management and Historic and Live Analytics in the Wowza Video user interface.    

This article explains how to embed and customize the Wowza Video Player in your site.

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 Video Player 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.

1. Get the live stream's embed code

The embed code allows you to use the Wowza Video Player in your site. Because the player_embed_code field is in_progress in the POST  /live_streams response after you create a live stream, you must query the live stream by ID for the completed embed code information. 

Fetch the live stream by its ID by sending a GET request to the /live_streams/{id} endpoint. 

Sample request

Endpoint Reference

curl -X GET \
-H "Content-Type: application/json" \
-H "Authorization: Bearer ${WV_JWT}" \
-X "${WV_HOST}/api/${WV_VERSION}/livestreams/{id}"

Sample response

The response includes:

• player_embed_code you'll use in the next step to embed the player into your site.

{
  "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",
    "player_type": "wowza_video_player",
    ...
    "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",
    "player_hls_playback_url": "https://[subdomain].wowza.com/[stream_id]/[stream_name]/hls/live/playlist.m3u8", 
    "hosted_page": true,
    ...
    "stream_targets": [
      {
        "id": "bnlbnb8p"
      }
    ],
    ...
}

2. Embed the player in your site

Now that you have the embed code, copy it from the response and paste it into your webpage.

Next, you can customize the Wowza Video Player to support your viewers, use cases, or branding.

3. Customize the Wowza Video Player

When you host your live stream using Wowza Video Player on your own website, you can customize the default player UI through JavaScript and CSS.

The player is optimized for browsers, mobile devices, and tablets. The default UI includes:

• Responsiveness
• Basic video player controls and functionality

Some of the customizations you can make to the player's default UI include:

Note: Because Wowza Video Player is built using THEOPlayer, the following links go to THEOPlayer's product documentation.

• Changing colors.
• Hiding a default control like the full screen button.
• Inserting a new button like two time-jump buttons to the control bar: one to go back 10 seconds in time and one to go forward 10 seconds in time.
• Disabling the ability to pause the video.

These are only a few of the possibilities for customization. Explore more Wowza Video Player customization possibilities.

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.

More resources

• Get started with Wowza Video