Trigger Video Playback on Player Visibility

Every now and then, someone from the Sales team (usually Jeff) will come to me a weird question about something crazy they want to do with our player.

“Hey Ji, do you think this is possible?”
Jeff Saunders – Account Manager and overly ambitious Vidyard user

“Yeah probably,” is typically my default response before I’ve given any thought to the problem at hand. After all, how can I say no to those puppy dog eyes?

Jeff’s latest request was to build out an effect analogous to the experience of sharing video in social feeds these days. It can be summarized as follows:

1. If the video becomes visible in the browser viewport, it should start playing automatically.
2. If the visitor scrolls away from the video so it is no longer visible, it should pause itself.
3. If the visitor scrolls back to the player, it should resume playback from where it left off.

Take a look at this page as an example of what I mean:
http://ift.tt/1MQieg3

We already know that video is the most engaging content you can add to your page, so having it dynamically respond to your visitors interaction with your site can really help your pages pop!

As it turns out, you can do something like this using it and a little JQuery and the player API.

The first challenge becomes, “How do I detect when the player is visible?” There was some really great discussion around this on Stack Overflow and one of our devs pointed me to this solution which seems to work.

The easiest thing to do is contain the player in a div that you can check for visibility. Something like this:

<div id=”video_container”>
        <script type='text/javascript' id='vidyard_embed_code_uuid' src='//play.vidyard.com/uuid.js?v=3.1.1&type=inline'></script>
</div>

You can then check the visibility of the div when the user scrolls with:

<script type=”text/javascript”>
        $(window).on('scroll', function() {
if (isElementInViewport($("#video_container")) { 
                // Play video
}
});
</script>

Of course, it’s not that simple. You’ll also need a flag to determine if the video is currently playing, otherwise the video will restart itself. This becomes:

<script type=”text/javascript”>
        $(window).on('scroll', function() {
if ((isElementInViewport($("#video_container")) && (playing==0)) { 
                // Play video
                // Set playing flag to true
}
});
</script>

Everything after that becomes a simple matter of inserting the relevant player API calls and manipulating the flag as necessary. Here’s a completed example for a single player:

<script src="//play.vidyard.com/v0/api.js"></script>
<script type="text/javascript">
  var videos = new Vidyard.players();
  var playing=0;
  $(window).on('scroll', function() {
    if(isElementInViewport($("#video_container")) && (playing==0)) {
      videos["uuid"].play();
      playing=1;
    } else if (!isElementInViewport($("#video_container")) && (playing==1)) {
      videos["uuid"].pause();
      playing=0;
    } 
  });
</script>

Keep in mind that if you decide to do this with multiple players on the page, as I did on my example page, you’ll need multiple flags.

So there you have it! A really fun way to add a splash of video on your page, while creating a dynamic experience for your visitors. Take it for a test drive on a page that has a few different inline players embedded and see if you can get your audience to stick around on your page for just a little bit longer.

The post Trigger Video Playback on Player Visibility appeared first on Vidyard.

from Vidyard http://ift.tt/1JojaG7
via IFTTT