One of the great things about providing video content to your site visitors is that it provides you with a media-rich way to define the content journey for your audience. At the end of your video, your choices are endless. You can provide viewers with supplemental content, prompt them to identify themselves, or even redirect them to another video.

That said, the beginning of the content journey tends to be pretty static: Here’s a video, click it to play, rinse, repeat.

But what if you could lead viewers into your content at a specific point of your (or their) choosing during playback? You could ensure they start at the most appropriate and targeted spot of your video. For example, maybe you have a webinar video on your site, and you want to tell a customer about a certain section that references something relevant to their needs. Wouldn’t it be awesome if, instead of sending an email with a “skip to 2:11” note, you could set up the video to start precisely at 2:11?

If your videos are posted to YouTube, you may already know that you can share a video and have it start at a given time using the t=# parameter in the URL. It’s called a video timestamp, and it looks something like this:

https://www.youtube.com/watch?v=youtube_id&t=70

But there’s a big catch: for this to work, your visitors are going to be driven to the YouTube page of your video and off your website.

That’s not what you want!

Take a look at this page. Not that exciting, I know. Now, take a look at this page.

See what I did there? Imagine that on a nicer page! The addition of the vytime parameter allows you to pick the starting point for your video by specifying the second at which it should start. Even better, if they wanted to, your viewer can jump back to the beginning of the video and watch the whole thing.

Fortunately, with a little Javascript trickery and the Vidyard player API, you can make your dreams a reality.

Want to learn how to create a video timestamp?

Here’s a code snip of how you can set this up on your own site:

<html>
 <head>
 </head>
 <body>
   <!-- Vidyard inline embed code -->
   <script type="text/javascript" id="vidyard_embed_code_playerUUID" src="//play.vidyard.com/playerUUID.js?v=3.1&type=inline"></script>
   <script src="//play.vidyard.com/v0/api.js"></script>
   <script type="text/javascript">
   // Parsing the query string
     function get_parameter_by_name(name) {
       name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
       var regexS = "[\\?&]" + name + "=([^&#]*)";
       var regex = new RegExp(regexS);
       var results = regex.exec(window.location.search);
       if (results == null) {
         return "";
       } else {
         return results[1];
       }
     }
     // Get the number of seconds from the query string using "vytime" as the parameter
     var urlParam = get_parameter_by_name("vytime");
     var playerTime = Number(urlParam);
     // If the vytime parameter is present, start the video automatically and jump to the time.
     function timeCheck() {
       if (playerTime > 0) {
       // Use the player API to start the player and jump to a specific time.
         var videos = new Vidyard.players();
         videos["playerUUID"].on("ready",function (){
           videos["playerUUID"].play();
         });
         videos["playerUUID"].on("play",function () {
           videos["playerUUID"].seek(playerTime);
           playerTime = null;
         });
       }
     }
     window.onload = timeCheck();
   </script>
 </body>
</html>

This functionality works particularly well for longer pieces of content like training and webinars. You could provide a link directly to a specific section of your video to avoid forcing people to click around trying to find the content they want. Remember that customer who would benefit from the relevant content at 2:11? Now they can get an email directing them to watch directly from that spot, while anyone else who lands on your site can watch your video from the beginning.

Regardless of how you use it, you’ve now added some really powerful functionality to your page. Have a great video that works for jumping to specific times? Feel free to share them in the comments with the timestamp!

Jivan Ramsahai