support Contact Support | system status System Status
Page Contents

    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 28 Sep 2020