support Contact Support | system status System Status

Player Developer Basics: Preparing to Write Code

In this topic, you will learn how to create a standard, best practice template that prepares you to write code to control the player.

Steps

  1. Paste an instance of Advanced implementation player code into an HTML page.
    <video data-video-id="5831704295001"
      data-account="921483702001"
      data-player="Uj7Yz80yM"
      data-embed="default"
      data-application-id
      class="video-js"
      controls
      width="640"
      height="360"></video>
    <script src="//players.brightcove.net/921483702001/Uj7Yz80yM_default/index.min.js"></script>
  2. Add an id attribute to the <video> tag and assign it a value of myPlayerID.
    <video id="myPlayerID"
  3. Add a <script> block just above the </body> tag.
  4. In the script block, use the videojs.getPlayer() method to obtain a reference to the player on the page. Use the id added earlier as the method's argument.
    <script>
      videojs.getPlayer('myPlayerID')
    </script>
  5. Use the ready() method, and code an anonymous callback function as its argument.
    <script>
      videojs.getPlayer('myPlayerID').ready(function() {
    
      )};
    </script>
  6. Declare a variable, named myPlayer in the anonymous function and assign it the keyword this, which represents the player in the context of the anonymous function.
    var myPlayer = this;

Completed Code

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Preparing to Write Code</title>
</head>

<body>

<video id="myPlayerID"
  data-video-id="5831704295001"
  data-account="921483702001"
  data-player="Uj7Yz80yM"
  data-embed="default"
  data-application-id
  class="video-js"
  controls
  width="640"
  height="360"></video>
<script src="//players.brightcove.net/921483702001/Uj7Yz80yM_default/index.min.js"></script>

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
  )};
</script>

</body>

</html>

Page last updated on 27 Feb 2020