Question

在我的网页中，我在一个页面中有5个视频。当我看到那个部分时，我想要视频播放。

例如

页面加载视频后自动播放如果我将页面滚动到第二部分第二视频需要播放

我在代码中使用了视频代码。

<video id="jp_video_4" autoplay="autoplay" loop="loop" style="width: 100%; height: auto;" src="Workspace/assets/videos/Play and Learn SLOW.webm"></video>

任何人都知道如何解决这个问题

Answer 1

您必须获取视频元素相对于页面的所有位置，并在每个滚动事件中将其与 ~~window.scrollY~~ pageYOffset属性进行比较。< / p>

这是一个带注释的代码段，我使用getBoundingClientRect()方法获取视频元素的位置。

// the list of our video elements
var videos = document.querySelectorAll('video');
// an array to store the top and bottom of each of our elements
var videoPos = [];
// a counter to check our elements position when videos are loaded
var loaded = 0;

// Here we get the position of every element and store it in an array
function checkPos() {
  // loop through all our videos
  for (var i = 0; i < videos.length; i++) {

    var element = videos[i];
    // get its bounding rect
    var rect = element.getBoundingClientRect();
    // we may already have scrolled in the page 
    // so add the current pageYOffset position too
    var top = rect.top + window.pageYOffset;
    var bottom = rect.bottom + window.pageYOffset;
    // it's not the first call, don't create useless objects
    if (videoPos[i]) {
      videoPos[i].el = element;
      videoPos[i].top = top;
      videoPos[i].bottom = bottom;
    } else {
      // first time, add an event listener to our element
      element.addEventListener('loadeddata', function() {
          if (++loaded === videos.length - 1) {
            // all our video have ben loaded, recheck the positions
            // using rAF here just to make sure elements are rendered on the page
            requestAnimationFrame(checkPos)
          }
        })
        // push the object in our array
      videoPos.push({
        el: element,
        top: top,
        bottom: bottom
      });
    }
  }
};
// an initial check
checkPos();


var scrollHandler = function() {
  // our current scroll position

  // the top of our page
  var min = window.pageYOffset;
  // the bottom of our page
  var max = min + window.innerHeight;

  videoPos.forEach(function(vidObj) {
    // the top of our video is visible
    if (vidObj.top >= min && vidObj.top < max) {
      // play the video
      vidObj.el.play();
    }

    // the bottom of the video is above the top of our page
    // or the top of the video is below the bottom of our page
    // ( === not visible anyhow )  
    if (vidObj.bottom <= min || vidObj.top >= max) {
      // stop the video
      vidObj.el.pause();
    }

  });
};
// add the scrollHandler
window.addEventListener('scroll', scrollHandler, true);
// don't forget to update the positions again if we do resize the page
window.addEventListener('resize', checkPos);

video {
  margin-bottom: 800px;
  display: block;
}

scroll to see and autoplay videos

<video src="http://vjs.zencdn.net/v/oceans.mp4" preload="auto"></video>
<video src="http://vjs.zencdn.net/v/oceans.mp4" preload="auto"></video>
<video src="http://vjs.zencdn.net/v/oceans.mp4" preload="auto"></video>
<video src="http://vjs.zencdn.net/v/oceans.mp4" preload="auto"></video>
<video src="http://vjs.zencdn.net/v/oceans.mp4" preload="auto"></video>

如何在焦点到达视频时自动播放视频/

1 个答案: