support Contact Support | system status System Status
Page Contents

    Player Developer Basics: Advanced Player Code

    In this topic, you will learn how to programmatically autoplay a video.
     

    Steps

    1. Start with the standard, best-practice code for programmatically controlling the player.
      <video id="myPlayerID"
        data-video-id="5785633544001"
        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>
    2. In the anonymous function for the videojs.getPlayer() method, following the variable assignment, mute the player so it can autoplay.
      myPlayer.muted(true);
    3. Use the player's on() method to add an event handler function for the loadedmetadata event.
      myPlayer.on('loadedmetadata', function(){
      
      });
    4. In the event handler, player the video.
      myPlayer.play()

    Complete Code

    <!doctype html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Untitled Document</title>
    </head>
    
    <body>
    
      <video id="myPlayerID"
        data-video-id="5785633544001"
        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;
          // Play here? Two tasks to do
          myPlayer.muted(true);
          myPlayer.on('loadedmetadata', function(){
            myPlayer.play();
          });
        });
      </script>
    
    </body>
    
    </html>

    Page last updated on 28 Sep 2020