How do I create a button on my page that will pause and resume playback?

July 31, 2020 15:30
Updated

Overview

Having the ability to assign objects on your page to perform player functions such as pause/resume increases the flexibility of how you can present your video content.

Using the Vidyard Player API, you can do just that.

Solution

The code below uses the Player API to perform a pause/resume action, depending on the current state of the video.

Feel free to adjust this code to match your exact requirements. This code can be found in action on this example video.

<head>

<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>

</head>
<body>

<!--Vidyard Player API.-->

<!--Button added to page.-->

<button id="pauseresume">Pause/Resume</button><br /><br />

<!--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/zchCsaJ3fX2mN8eskVjc1f.jpg"
 data-uuid="zchCsaJ3fX2mN8eskVjc1f"
 data-v="4"
 data-type="inline"
/>

<!--Start of API Function. Replace mentions of <UUID> with the matching Player UUID above.-->

<script type="text/javascript">

window.onVidyardAPI = (vidyardEmbed) => {
vidyardEmbed.api.addReadyListener((_, player) => {

var button = document.getElementById("pauseresume");
var video = VidyardV4.players[0];
var pause = 0

// When the video is paused, change flag to 1 and add console message

video.on("pause", function() {
pause = 1; 
console.log("video pause")
});

// When the video is first played or resumed, change flag to 0 and add console message.

video.on("play", function() {
pause = 0; 
console.log("video resumed/play")
});

// When the button is clicked, check the flag and perform the appropriate action.

button.onclick = function() {
if (pause ==1){
video.resume();
}
else {
video.pause();
}
return false;
}

})};
</script>

</body>

Overview

Solution

Need support