时间戳

首页 > 解决方案 > 无法让我的 JS 函数（一次播放一个视频）进行滚动捕捉

javascript - 无法让我的 JS 函数（一次播放一个视频）进行滚动捕捉

问题描述

我有一个容器，它允许快速滚动到背景图像，所以一切都很好。我正在尝试将视频而不是图像添加到页面，但需要它们在用户向下浏览页面时一次触发一个。似乎快照滚动功能不允许我的视频自动播放。我不太确定问题出在哪里……

滚动快照代码：

      const gra = function(min, max) {
        return Math.random() * (max - min) + min;
      }
      const init = function(){
        let items = document.querySelectorAll('bg-image');
        for (let i = 0; i < items.length; i++){
          items[i].style.background = randomColor({luminosity: 'light'});
        }
      }

滚动代码自动播放：

      var videos = document.getElementsByClass("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);

标签： javascripthtmlweb

解决方案

有视频自动播放政策更改生效（自 2019 年 1 月起），不允许在没有用户手势的情况下自动播放，感谢上帝！

这至少在 Chromium 浏览器中是有效的，我认为 Mozilla 也是如此。

您可以使用命令行参数覆盖该策略以测试您的代码，但如果它不能与其他人一起使用，那有什么好处。

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

推荐阅读