如何在焦點到達視頻時自動播放視頻/

在我的網頁中，我有一個頁面中有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>

任何一個知道如何解決售後服務這個

來源

2016-03-15 r.vengadesh

您將獲得相對於頁面中的所有視頻元素的位置，並在每個滾動事件與~~window.scrollY~~pageYOffset性能比較。

這裏是一個註釋片段，我用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>

來源

2016-03-15 13:05:57 Kaiido

如何在焦點到達視頻時自動播放視頻/

回答

相關問題