滚动到时播放 HTML5 视频

Posted 2023-05-07

【中文标题】滚动到时播放 HTML5 视频

【英文标题】：Play HTML5 Video when scrolled to

【发布时间】：2013-03-02 00:20:00

【问题描述】：

是否只有当用户在浏览器视口中有视频（或视频的某个百分比）时才自动播放 html5 视频？

【问题讨论】：

你可以有一个不显示的 div...如果那个人的年龄是正确的，那么在 div 中添加带有视频源的视频标签并将显示更改为阻止...。如果这是您想要的，我可以帮助您...简单地告诉我您想要检索访问者年龄的方式，就是这样 xD

【参考方案1】：

简述

假设我们的浏览器窗口 W 当前滚动到 y 位置 scrollTop 和 scrollBottom

当视频的位置在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);
        );

【讨论】：

请解释你的答案，而不是张贴代码墙。

Mikkel 的解决方案在注释掉的文本中进行了解释。它很优雅，而且很有效。另外，我喜欢它使用 jQuery。谢谢米克尔！

我确实为@MikkelJensen 很好的答案添加了解释

太好了，对我帮助很大！这没什么大不了的，但有没有办法让tolerancePixel 占一个百分比？视频播放完毕后是否可以显示“再次播放”按钮？

【参考方案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);

【参考方案3】：

您可以使用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 变换移动，情况也是如此。）

【讨论】：

我假设问题是在下载一定百分比的视频后播放。我猜我没有仔细阅读它

是的。您可以使用$ 代替getElementById，使用$('#video').bind(... 代替addEventListener。如果需要，可以使用“.offset()”。

【参考方案4】：

有一个用于此场景的新 API，称为 Intersection_Observer_API，它 Chrome 51+ 和 Edge 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