如何自动播放视频时，焦点达到视频/ [英] How to automatically play video when focus reaches video/

问题描述

在我的网页中，我在一个网页上有5个视频。

页面加载视频一个自动播放，如果我滚动我的页面到第二部分第二个视频需要播放

我在我的代码中使用视频标签。

 < video id =jp_video_4autoplay =autoplayloop =loopstyle =width：100％; height：auto; src =Workspace / assets / videos / Play and Learn SLOW.webm>< / video> 
  

任何人都知道如何slove

解决方案

您必须获取视频元素的所有位置，相对于页面，并在每个滚动事件与 window.scrollY

这是一个注释的代码段，其中我使用 getBoundingClientRect（） 方法获取视频元素位置。

  //视频元素列表var videos = document.querySelectorAll（'video'） ; //一个存储每个元素顶部和底部的数组var videoPos = []; //当视频加载时检查我们的元素位置的计数器var loaded = 0; //这里我们得到每个元素和存储的位置它在一个数组函数checkPos（）{//循环通过我们的所有视频（var i = 0; i< videos.length; i ++）{var element = videos [i]; // get its bounding rect var rect = element.getBoundingClientRect（）; //我们可能已经在页面中滚动//所以添加当前pageYOffset位置var top = rect.top + window.pageYOffset; var bottom = rect.bottom + window.pageYOffset; //它不是第一次调用，不创建无用的对象if（videoPos [i]）{videoPos [i] .el = element; videoPos [i] .top = top; videoPos [i] .bottom = bottom; } else {//第一次为我们的元素添加一个事件监听器element.addEventListener（'loadeddata'，function（）{if（++ loaded === videos.length  -  1）{//我们的所有视频都已加载，重新检查位置//使用rAF在这里只是为了确保元素呈现在页面上requestAnimationFrame（checkPos）}}）//推送我们的数组中的对象videoPos.push（{el：element，top：top，bottom：bottom }）; }; //初始的checkcheckPos（）; var scrollHandler = function（）{//我们当前的滚动位置//页面顶部var min = window.pageYOffset; //我们的页面的底部var max = min + window.innerHeight; videoPos.forEach（function（vidObj）{//如果（vidObj.top> = min&& vidObj.top< max）{//播放视频vidObj.el.play ）;} //视频的底部在页面的顶部//或者视频的顶部低于页面的底部//（===不可见）if（vidObj.bottom< = min || vidObj.top> = max）{//停止视频vidObj.el.pause（）;}}）;}; //添加scrollHandlerwindow.addEventListener（'scroll'，scrollHandler，true）;如果我们调整pagewindow.addEventListener（'resize'，checkPos）;  

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

 滚动查看和自动播放视频< video src =http://vjs.zencdn.net/v/oceans.mp4preload =auto>< / video>< video src =http://vjs.zencdn.net/v/ oceans.mp4preload =auto>< / video>< video src =http://vjs.zencdn.net/v/oceans.mp4preload =auto>< / video& < video src =http://vjs.zencdn.net/v/oceans.mp4preload =auto>< / video>< video src =http://vjs.zencdn.net/ v / oceans.mp4preload =auto>< / video>  

In my web page i have 5 video in a single page. I want video play when i see that section.

For example

After the page loading video one auto play if i scroll my page to second section second video need to play

I used video tag in my code.

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

Any one know how to slove this

解决方案

You will have to get all the position of your video elements, relative to the page, and compare it at each scroll event with the window.scrollY pageYOffset property.

Here is an annotated snippet where I used getBoundingClientRect() method to get the video elements positions.

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

这篇关于如何自动播放视频时，焦点达到视频/的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！