滚动时播放HTML5视频到

Question

只有当用户在浏览器视口中拥有视频（或一定比例的视频）时，才有权自动播放HTML5视频吗？

Answer 1

您可以使用window.pageXOffset和window.pageYOffset来检查浏览器窗口的垂直和水平滚动距离。使用window.innerWidth和innerHeight以及一些基本的几何数学来计算可见页面与视频本身的重叠程度。将这些全部放入一个函数中，您可以将其附加到窗口对象上的scroll和resize事件，以在每次滚动更改时运行检查。

下面是一些示例代码：

var video = document.getElementById('video'), 
    info = document.getElementById('info'), 
    fraction = 0.8; 

function checkScroll() { 
    var x = video.offsetLeft, 
     y = video.offsetTop, 
     w = video.offsetWidth, 
     h = video.offsetHeight, 
     r = x + w, //right 
     b = y + h, //bottom 
     visibleX, 
     visibleY, 
     visible; 

    if (window.pageXOffset >= r || 
     window.pageYOffset >= b || 
     window.pageXOffset + window.innerWidth < x || 
     window.pageYOffset + window.innerHeight < y 
    ) {  

    info.innerHTML = '0%'; 
    return; 
    } 

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

    info.innerHTML = Math.round(visible * 100) + '%'; 

    if (visible > fraction) { 
    video.play(); 
    } else { 
    video.pause(); 
    } 

} 

window.addEventListener('scroll', checkScroll, false); 
window.addEventListener('resize', checkScroll, false); 

//one time at the beginning, in case it starts in view 
checkScroll(); 

//as soon as we know the video dimensions 
video.addEventListener('loadedmetadata', checkScroll, false); 

并有working example。

此代码假设一个非常简单的页面布局。如果您的视频完全位于另一个具有“位置：相对”设置的元素中，那么您需要做更多的工作来计算视频的正确位置。 （这同样如果视频已被移动与CSS变换。）

Answer 2

希望这可以帮助，但它已经回答了前

http://jsfiddle.net/jAsDJ/

var videos = document.getElementsByTagName("video"), 
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) { 
       video.play(); 
      } else { 
       video.pause(); 
      } 

    } 

} 

window.addEventListener('scroll', checkScroll, false); 
window.addEventListener('resize', checkScroll, false); 

Answer 3

简单

比方说，我们的浏览器窗口W当前滚动到y位置scrollTop和scrollBottom

O如果您的视频位置为V1或V2，则视频将不会播放。

代码细节

 $(document).ready(function() { 
      // Get media - with autoplay disabled (audio or video) 
      var media = $('video').not("[autoplay='autoplay']"); 
      var tolerancePixel = 40; 

      function checkMedia(){ 
       // Get current browser top and bottom 
       var scrollTop = $(window).scrollTop() + tolerancePixel; 
       var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel; 

       media.each(function(index, el) { 
        var yTopMedia = $(this).offset().top; 
        var yBottomMedia = $(this).height() + yTopMedia; 

        if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){ //view explaination in `In brief` section above 
         $(this).get(0).play(); 
        } else { 
         $(this).get(0).pause(); 
        } 
       }); 

       //} 
      } 
      $(document).on('scroll', checkMedia); 
     }); 

Answer 4

没有针对此方案中的新API，被称为Intersection_Observer_API，这 铬51 +和15+的边缘已经支持。

var options = { 
    root: document.querySelector('.scroll-container'), 
    rootMargin: '0px', 
    threshold: 1.0 // trigger only when element comes into view completely 
}; 
var ob = new IntersectionObserver((entries, observer) => { 
    entries[0].target.classList.toggle('red'); 
}, options); 

// observe all targets, when coming into view, change color 
document.querySelectorAll('.target').forEach((item) => { 
    ob.observe(item); 
}); 

下面是一个简单的演示： https://codepen.io/hectorguo/pen/ybOKEJ