How do I indicate the duration of a video on the thumbnail image?

A thumbnail is typically a snapshot image from the video along with a play button.

By using the Vidyard Player API on your webpage, you can add metadata to a thumbnail which provides information about the video to your visitor. 

In this example, we've added a timecode directly to the bottom, right-hand corner of the thumbnail to indicate the length of the playlist (or single video). Including the duration of the playlist/video on the thumbnail can be important because it may influence whether a page visitor decides to click play.

See a working example on our CodePen page.

Code sample

<!--Thumbnail Timecode by Chris Broughton, Jan 2020
Designed for a single player on a webpage. Replace PLAYER IMG with your own embed-->
<!-- JQUERY CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- PLAYER JS -->
<script type="text/javascript" async src="https://play.vidyard.com/embed/v4.js"></script>
<!-- PLAYER DIV START -->
<div style="max-width:640px">
<!-- PLAYER IMG -->
<img
 style="width: 100%; margin: auto; display: block;"
 class="vidyard-player-embed"
 src="https://play.vidyard.com/8VgWAuTYZfxErcDgAePuft.jpg"
 data-uuid="8VgWAuTYZfxErcDgAePuft"
 data-v="4"
 data-type="inline"
/>
<!-- PLAYER DIV CLOSE -->
</div>
<!-- STYLE THE TIMECODE BOX -->
<style>
#lengththumbnail {
 display: block;
 position: absolute;
 bottom: 0;
 height: 30px;
 width: 100px;
 color: white;
 background: black;
 filter: opacity(0.6);
 text-align: center;
 font-size: 26px;
 font-family:sans-serif;
 right:0;
 visibility:hidden;
}
</style>

<!-- DIV FOR THE TIMECODE -->
<div id="lengththumbnail"><div>

<!-- THE MAGIC (add div to player, turn it into minutes, hide it on play, etc -->
<script type="text/javascript"> 
 
window.onVidyardAPI = (vidyardEmbed) => {
vidyardEmbed.api.addReadyListener((_, player) => { 
 
 var video = VidyardV4.players[0];
 var videouuid = video.uuid
 var vlength = video.metadata.length_in_seconds;
 var minutes = Math.floor(vlength / 60);
 var seconds = vlength - minutes * 60;

function str_pad_left(vlength, pad, length) {
 return (new Array(length + 1).join(pad) + vlength).slice(-length);
 }

var finalTime = str_pad_left(minutes, '0', 2) + ':' + str_pad_left(seconds, '0', 2);
 document.getElementById('lengththumbnail').innerHTML = finalTime;


$('#lengththumbnail').appendTo('.vidyard-div-' + videouuid);
 $("#lengththumbnail").css('visibility', 'visible');

video.on('play', function() {
 $("#lengththumbnail").hide();
 });

video.on('playerComplete', function() {
 $("#lengththumbnail").show();
 });
 })
}
</script>