How do I add buttons which will skip a video backwards or forward by 10 seconds?

Evan Stewart

March 27, 2020 04:21
Updated

By default, the Vidyard player does not have the option to include buttons that skip forward and backwards. You can use the scrubber bar to achieve this.

That being said, it is possible to implement external buttons through the player API. This will allow you to fully customize the look and function of the buttons, which are shown outside of the player.

Use the code below on your webpage to add this functionality.

<html>
<head>
  <!-- Vidyard embed script and API -->
  <script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
  <!-- jquery library -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript">
    // callback for multiple players
    window.onVidyardAPI = (vidyardEmbed) => {
    vidyardEmbed.api.addReadyListener((_, player) => {
    console.log('player ready:', player.ready());
    console.log(player.uuid);
    var buttonfwd = document.getElementById("fwd10sec");
    var buttonback = document.getElementById("back10sec");
    //get an array of all of the players on the page
    var players = VidyardV4.players;

    // When the button is clicked, check the flag and perform the appropriate action, change the array value to change which player is impacted
    buttonfwd.onclick = function() {
    players[0].seek(players[0].currentTime() + 10);
    }

    buttonback.onclick = function() {
    players[0].seek(Math.max(0, players[0].currentTime() - 10));
    }
   }, )
  }
  </script>
</head>
<body>
  <!--Vidyard Embed Code - Replace mentions of [UUID] with the appropriate Player UUID.-->
  <img
  style="width: 100%; margin: auto; display: block;"
  class="vidyard-player-embed"
  src="https://play.vidyard.com/[UUID].jpg"
  data-uuid="[UUID]"
  data-v="4"
  data-type="inline"
  />

  <!--Start of API Function. Replace mentions of [UUID] with the matching Player UUID above.-->
  <button id="back10sec">Back 10 Secs</button>
  <button id="fwd10sec">Forward 10 Secs</button>
</body>
</html>

To see it in action, visit this example page.

Need support