Dynamically Assigning Videos to a Player

Product(s)
Video Cloud
Role(s)
Studio User
Player Developer
Task(s)
Publish Videos

This topic covers different ways that videos can be dynamically assigned to players.

You may have cases where you need to change the video associated with a player. For example, maybe the viewer has the ability to control which video they want to see. Maybe the video in the player is based upon which part of the site the viewer came from.

If you need to display different videos in a player, it is recommended to use one player and then dynamically change the video associated with the player.

The following techniques are outlined in this topic:

Note: Although it is possible to change a video that is statically bound to a player, this is not a good practice. If you do this, the poster image for the statically bound video may briefly appear in the player before the dynamically added video is displayed. For this reason, it is a best practice to create a player that does not have a video initially associated with it for use in situations where the video will be dynamically changed.

Content can also be dynamically assigned to a player using the Catalog API. For more information and sample code, see the developer document Dynamically Change Source Videos.

Passing the video ID as a URL parameter

You can change the video source for a player by passing the video ID as a URL parameter using the form ?videoId=YOUR_VIDEO_ID.

http://players.brightcove.net/20318290001/f1d70e07-8480-4bbd-b4ef-747e9333a034_default/index.html?videoId=4292158104001

Passing the reference ID as a URL parameter

You can change the video source for a player by passing the reference ID as a URL parameter using the form ?videoId=ref:YOUR_VIDEO_REF_ID.

http://players.brightcove.net/20318290001/f1d70e07-8480-4bbd-b4ef-747e9333a034_default/index.html?videoId=ref:1234

Modifying the embed code to supply a Video ID

You can assign a Video Cloud video to the player embed code directly using the video ID.

In-Page Embed Code

Add the attribute data-video-id="YOUR_VIDEO_ID" to the <video> tag:

<video-js   data-account="57838016001"
  data-player="6e44f16e-31e9-48b2-83b9-6edd71217540"
  data-embed="default"
  data-video-id="68143720001"
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/57838016001/6e44f16e-31e9-48b2-83b9-6edd71217540_default/index.min.js"></script>

Note: When the player JavaScript executes, it reads the video ID from the data-video-id attribute only at startup. Changing the value with, for example, JavaScript's setAttribute() method, does not cause the player to load the video. For an example on how to change the video using JavaScript, see the Player Catalog developer document.

iframe Embed Code

Add ?videoId=YOUR_VIDEO_ID to the end of the URL in the src attribute for the iframe:

<iframe src='//players.brightcove.net/57838016001/6e44f16e-31e9-48b2-83b9-6edd71217540_default/index.html?videoId=68143720001'
 allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>

Modifying the embed code to supply a Reference ID

You can assign a Video Cloud video to the player embed code directly using the reference ID.

Note: When using a reference ID that has special characters, you must escape the special characters in the publishing code or issues may arise.

In-Page Embed Code

Add the attribute data-video-id="ref:YOUR_VIDEO_REF_ID" to the <video> tag:

<video-js data-account="57838016001"
  data-player="6e44f16e-31e9-48b2-83b9-6edd71217540"
  data-embed="default"
  data-video-id="ref:68143720001"
  class="video-js"
  controls></video-js>
<script src="https://players.brightcove.net/57838016001/6e44f16e-31e9-48b2-83b9-6edd71217540_default/index.min.js"></script>

iframe Embed Code

Add ?videoId=ref:YOUR_VIDEO_REF_ID to the end of the URL in the src attribute for the iframe:

<iframe src='//players.brightcove.net/57838016001/6e44f16e-31e9-48b2-83b9-6edd71217540_default/index.html?videoId=ref:68143720001'
 allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>