当用户使用video.js滚动时播放视频

play video when user scrolls specifically using video.js

本文关键字：滚动 播放 视频 js video 用户      更新时间：2023-09-26

我意识到这个问题的变体之前已经问过了，但没有一个具体涉及如何在video.js上做到这一点

我使用video.js为我的视频。我需要视频播放时，用户滚动到他们的观点。很多人都问过html5视频的问题，但我想具体了解一下video.js。我已经做了以下的，但没有运气-

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

我还应该提到我有多个视频具有相同的ID 'movie-id_html5_api'，我都想让他们在滚动时播放。

提前感谢!!

我更新了jsFiddle，使其只在滚动到视图中时播放每个视频。如果视频不在可视范围内，则暂停播放。这归功于playVideos函数的Stack Overflow答案，以及将每个视频播放器id存储在数组中。也要归功于isOnScreen()函数的Stack Overflow答案。

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;
}
相关文章：