Assigning a Video to the Player Programmatically

In this topic, you will learn how to dynamically change the video in the player. To do this you will programmatically change the player instances. This document shows various approaches to changing the video in the player.

Set video ID via URL

It is possible to use the URL implementation and dynamically change the video that is played. To do this you use a query string at the end of the URL in the form ?videoId=YOUR_VIDEO_ID as shown in the following example.

https://players.brightcove.net/..._default/index.html?videoId=2114345471001

Using reference IDs

In all examples in this document where a video ID is used a reference ID can be substituted. If you use the reference ID you must prepend that identifier with ref:. For example, the first URL uses the video ID, whereas the second uses the reference ID.

https://players.brightcove.net/..._default/index.html?videoId=2114345471001
https://players.brightcove.net/..._default/index.html?videoId=ref:1234abcd

Set video ID via tag attribute

The In-page embed code contains the <video> tag. The Video Cloud ID for the video is associated with the data-video-id HTML 5 data attribute.

<video-js
  data-account="1507807800001"
  data-player="dadff0fb-5635-4eac-a1b8-ab8c37a72be9"
  data-embed="default"
  data-video-id="2114345471001"
  controls=""></video-js>
<script src="https://players.brightcove.net/1507807800001/dadff0fb-5635-4eac-a1b8-ab8c37a72be9_default/index.min.js"></script>

Note: When the player JavaScript executes, it reads the video ID from the data-video-id attribute. However, it does so only at startup. Changing the value with, for example, JavaScript's setAttribute() method, does not cause the player to load the video. To change the video after the player has loaded, you should use the JavaScript method described below.

Set video using JavaScript

In many cases, you want user interactions to control which video is played. To accomplish this, you can use JavaScript and the player catalog's getVideo() and load() methods to dynamically retrieve and play the desired video.

Lines 1-10: Advanced (In-page embed) code with no value for the data-video-id attribute.
Lines 13,19: Use the ready() method to be sure player is ready to act upon.
Line 14: Associate the player, referred to as this in the function, with a variable.
Line 15,18: Use the catalog's getVideo() method using the Video Cloud ID and a callback function as parameters.
Line 17: Use the catalog's load() method to load the video and play it.

<video-js id="myPlayerID"
  data-account="1507807800001"
  data-player="rf1BTdKk6M"
  data-embed="default"
  controls=""
  data-video-id=""
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1507807800001/rf1BTdKk6M_default/index.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.catalog.getVideo('2114345471001', function(error, video) {
        //deal with error
        myPlayer.catalog.load(video);
      });
    });
  </script>

Set video in iframe

To specify the video to a player hosted in an iframe, you can pass the video ID (or reference ID as mentioned earlier) via a URL's query string. For example:

  <iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540"></iframe>

You can also use JavaScript to change the query string for the iframe's src attribute to tell the player which new video to play.

Lines 1-4: The iframe implementation code. Note the query string (text after the ? character) supplies the ID for the video to be played.
Line 7: Define the function to be called when video should change.
Line 8: Use JavaScript's getElementsByTagName() method to place the <iframe> tag into a variable. Note that the method returns an array of all matching elements on the page, and since you are using the first (and only) iframe tag on the page, you can use the zeroth element of the array.
Line 9: Creates a query string that will replace the old one. This defines the new video to be played.
Line 10: Assigns to a variable the src property of the iframe tag.
Line 11: Extracts the source for the player, minus the old query string.
Line 12: Builds the new value for the src property by combining the player source with the new video's query string definition.
Line 13: Assigns the new source/video information to the <iframe> tag's src property.

<iframe src="https://players.brightcove.net/.../index.html?videoId=6116779978001"
  allowfullscreen=""
  allow="encrypted-media"
  width="960" height="540"></iframe>

<script type="text/JavaScript">
  function changeVideo() {
    var iframeTag = document.getElementsByTagName("iframe")[0],
      newVideo = "?videoId=3742256815001",
      theSrc = iframeTag.src,
      srcWithoutVideo = theSrc.substring( 0, theSrc.indexOf( "?" ) ),
      newSrc = srcWithoutVideo + newVideo;
    iframeTag.src = newSrc;
  }
</script>