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!!

Answer 1

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;
}