play video when user scrolls specifically using video.js

Question

I realise variants of this question have been asked before, but none specifically relating to how to do it on video.js

I'm using video.js for my videos. I need the videos to play when the user scrolls to their view. Many people have asked about html5 videos but I would like to know on video.js specifically. I've done the following but no luck -

var videos = videojs('movie-id_html5_api');
videojs("movie-id_html5_api").ready(function(){
  var videos = this;
  fraction = 0.8;
  function checkScroll() {

  for(var i = 0; i < videos.length; i++) {

    var video = videos[i];

    var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
        b = y + h, //bottom
        visibleX, visibleY, visible;

        visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
        visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

        visible = visibleX * visibleY / (w * h);

        if (visible > fraction) {
            videos.play();

        } else {
            videos.pause();
        }

   }

  }

    });
    window.addEventListener('scroll', checkScroll, false);
    window.addEventListener('resize', checkScroll, false);

I should also mention I have multiple videos with the same ID 'movie-id_html5_api' and I would all like to get them to play when scrolled.

thank you in advance!!

Take a look at the videoJS docs: https://github.com/videojs/video.js/blob/master/docs/guides/setup.md. Under Step 2: "The 'id' Attribute: Should be used and unique for every video on the same page." — Andrew Briggs, Aug 22 '14 at 04:38
Also, if you want them all to play at the same time, why not add a class to each video, then iterate over all them to play each one. — Andrew Briggs, Aug 22 '14 at 04:41

score 0 · Accepted Answer · edited May 23 '17 at 12:27

I updated the jsFiddle to only play each video if it is scrolled into view. If the video is not in view, it is paused. Credit to this Stack Overflow answer for the playVideos function and also for storing each video player id in an array. Also credit to this Stack Overflow answer for the isOnScreen() function.

videojs.options.flash.swf = "http://vjs.zencdn.net/c/video-js.swf";
var players = ['example_video_1', 'example_video_2'];

window.addEventListener("resize", playVideos, false);
window.addEventListener("scroll", playVideos, false);

// Loop through all the players, check if video player is visible in the viewport. If it is visible, play it. If not, do not play it.
function playVideos() {

    for (var i = 0; i < players.length; i++) 
    {
        var videoPlayer = $('#' + players[i]);
        var videoPlayerElem = _V_('#' + players[i]);

        if (isOnScreen(videoPlayer))
        {
             videoPlayerElem.play();
        }
        else
        {
             videoPlayerElem.pause();
        }     
    }

}

function isOnScreen(element) {
   var elementOffsetTop = element.offset().top;
   var elementHeight = element.height();

   var screenScrollTop = $(window).scrollTop();
   var screenHeight = $(window).height();

   var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
   var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;

   return scrollIsAboveElement && elementIsVisibleOnScreen;
}

thank you so much! is there any particular reason you've chosen to use the flash option? I wanted my videos to not have to depend on flash for ios compatibility.. — user3658991, Aug 22 '14 at 07:45
also, I wish to play each video when the user scrolls down to see each individual one. much like this http://jsfiddle.net/jAsDJ/ - it seems in your answer both videos start as soon as the user scrolls. thanks for your help so far! — user3658991, Aug 22 '14 at 07:47
@user3658991 - I'm almost sure that including the swf file is standard use for VideoJS. If I'm correct, VideoJS uses flash as a fallback option if HTML5 capabilities are not present. — Andrew Briggs, Aug 24 '14 at 20:16

play video when user scrolls specifically using video.js

1 Answers1