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>