StreamsPlaybackEncodingBitmovin Dashboard

Playing videos via websites is one of the most common ways for users to consume video content today. Bitmovin provides a web player that you can embed into your web pages via JavaScript, so users can play videos. Playback can include both streaming and non-streaming, depending on how the video was encoded.

This Quickstart shows how to use Bitmovin's <a href="https://bitmovin.com/docs/player/api-reference/web" target="_blank"WEB API</a> to load and stream a DASH-encoded video on a simple web page, hosted by a local web server running on your development machine.

It builds on the [Encoding Quickstart for Java](🔗) that generated a DASH-encoded video to an S3 bucket for streaming, using Bitmovin's [Java SDK](🔗).

The following subsections describe everything necessary to playback this video on a web page:

  • [Prerequisites](🔗)

  • [Step 1 – Configure CORS in your S3 Bucket](🔗)

  • [Step 2 – Set up a Web Server](🔗)

  • [Step 3 – Prepare Your HTML File](🔗)

  • [Step 4 – Add Bitmovin's Player SDK](🔗)

  • [Step 5 – Embed the Player](🔗)

  • [Step 6 – Locate Your Bitmovin Player License Key](🔗)

  • [Step 7 – Configure and Instantiate the Player](🔗)

  • [Step 8 – Specify the Source Video](🔗)

  • [Step 9 – Load the Video](🔗)

  • [Step 10 – Test Video Playback](🔗)

# Prerequisites

The following items are required to complete this tutorial:

  • DASH-encoded video files successfully created as per the [Encoding Quickstart for Java](🔗) tutorial.

  • Functional web server that can host HTML files. This Quickstart uses [XAMPP](🔗) which you can download for free to follow along with.

  • Your player license key.

# Step 1 – Configure CORS in your S3 Bucket

Cross-origin resource sharing (CORS) must be configured on the S3 bucket containing your DASH-encoded video. This allows websites, like the one you will create in this Quickstart, to access the video data.

Follow the steps below to configure CORS for the DASH-encoded video:

  1. Log into S3 and select your bucket.

  2. Locate the CORS permissions in the S3 console as described in Amazon's [S3 documentation](🔗).

  3. Paste the following JSON into the CORS configuration field and save it:


This configuration allows all domains to perform GET requests on the S3 bucket. You may want to further customize this configuration once everything is working.
# Step 2: Set up a Web Server
This Quickstart uses the free [XAMPP](🔗) web server to host web files locally (i.e., via localhost:8080) on your local development machine. This section shows how to set up XAMPP so you can playback an encoded video on a locally-hosted web server.
Follow the steps below to set up XMAPP:
  1. Download [XAMPP](🔗) and install it.
  2. Start XAMPP.
  3. Navigate to the **General** tab, click **Start**, and wait until the **Status** turns green and the local IP address is visible:
513

  1. Navigate to the **Services** table and click **Start All**.
  2. Navigate to the **Network** tab, select **localhost:8080 -> 80 (Over SSH)** and click **Edit**.
  3. Disable **Over SSH** to enable HTTP and click **OK**.
  4. Ensure the entry now says **localhost:8080 -> 80** (i.e., **Over SSH** has been removed) and click **Enable**. The entry should now look as follows:
516

  1. Navigate to the **Volumes** tab and click **Mount** beside the directory listed (e.g., **/opt/lampp**)
  2. Click **Explore** to open the volume's directory.
  3. Navigate into the **htdocs** subdirectory.
  4. Create a subdirectory named **test**.
  5. Create an **index.html** file in **test** that contains some text (e.g., `hello world`).
  6. Open a web browser, enter **http://localhost:8080/test/**, and verify that you can see the text.
You now have a functional web server to use for local testing when following this tutorial. The following sections show how to modify your **index.html** file to use Bitmovin's web API for video playback.
# Step 3 – Prepare Your HTML file
This section provides the templated HTML code that will be used in subsequent sections to play a video in your browser.
Edit the **index.html** file that you created in the previous section and replace the contents with the following:

Tip
The code comments provide the outline of the code changes that you will make in the sections below.
# Step 4 – Add Bitmovin's Player SDK
Start by adding the Bitmovin player SDK module to your HTML file. Add `<script src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js" type="text/javascript"></script>` below `<!-- SDK Installation-->` as shown in the following code example:

# Step 5 – Embed the Player
The player SDK needs to know which container to render its video and UI components. The following code example shows how to add this as a `div` element in the `body` with the unique ID: `my-player`:

# Step 6 – Locate Your Bitmovin Player License Key
You will need your Bitmovin player key in order to render videos with the player. This key is available via your Bitmovin Dashboard.
Follow the steps below to locate and copy your key:
  1. Open your [Bitmovin dashboard](🔗) in a browser and log in.
  2. Navigate to **Player** in the left-hand navigation bar, expand the dropdown, and select **Licenses**:
245

  1. Click on **default-license** in the list.
  2. Locate the **Player Key** and hover your mouse over it to display the copy icon:
877

  1. Click the copy icon to copy the key. This key will be used in the next section.
# Step 7 – Configure and Instantiate the Player
In order to play a video, the player must be configured with your player license key. It can also be configured with several other settings as listed [here](🔗).
Follow the steps below to create a player configuration and then instantiate a player:
  1. Add the following `playerConfig` to the `<script>` section of your HTML file:

  1. Replace `<PLAYER_LICENSE_KEY>` with the player license key you copied in the [previous section](🔗).
  2. Add the following code below the configuration to get the player container using its `div` ID:

  1. Instantiate a Bitmovin `Player` passing in the container and configuration:

# Step 8 – Specify the Source Video
This section shows how to specify the encoded source video stored on S3 to play. This is done by creating a source configuration that specifies details like:
  • where to load content from;
  • available streaming formats;
  • DRM configurations;
  • additional subtitles or thumbnail tracks;
  • metadata (e.g., title and description for the player UI to display); and
  • source-specific Bitmovin analytics configurations.
Add the following code to the `<script>` section in your HTML file to create a source configuration object: 

The configuration in this example specifies the title, description, URL of your DASH-encoded video stored in your S3 bucket, and the (publicly-accessible) JPG to use for the poster (i.e., the initial display image).
# Step 9 – Load the Video
The final step is to load the video using the source configuration defined in the previous step. Add a call to `player.load()` below the `sourceConfig` definition to load the video:

# Step 10 – Test Video Playback
Everything is now in place to test playback of the encoded video:
  1. Save your **index.html** file.
  2. Ensure you web server is running.
  3. Open your web browser and navigate to [http://localhost:8080/test/](🔗). You should see the player displayed using the poster defined [above](🔗):
754

  1. Click the play button to verify that the video streams and renders correctly, and that audio is working.
Note
The player was configured [above](🔗) to mute the audio by default, so you will need to turn up the volume using the volume control.
You've now successfully streamed a DASH-encoded video. The next step is to set up [analytics](🔗) to monitor video viewing trends and behaviors.