Question

我正在使用yall.js延迟加载视频。它可以正常工作。但是，我想添加一个加载动画，该动画将位于视频上方，直到开始播放为止，这样，在连接速度较慢的情况下，您将获得第一帧和一些加载动画。

我可以使用该功能来处理单个视频，但是我希望它可以自动并单独地用于所有视频，因为其他页面将包含更多视频，并且我希望每个页面都具有通用的代码。

我正在使用.each来检测看似的所有视频，但随后我想引用每个迭代来针对这些单独的元素运行代码，但这对我不起作用。

  <video class="full lazy" controls loop muted playsinline>
    <source data-src="video_one.mp4" type="video/mp4" alt="a video">
    Your browser does not support the video tag.
  </video>
  <div class="loader lazy_anim"></div>
</div>

$('video').each(function(indVideo) {
  console.log(indVideo);
  var lazyLoader = $('video').next();
  var playCheck = setInterval(function() {
    var videoElement = $('video').get(0); //I want this to refer to the each individual video, but I believe it's just picking the first
    console.log(videoElement.paused);

    if (videoElement.paused) {
      console.log("paused!");
    } else {
      lazyLoader.removeClass('lazy_anim')
      console.log("playing!");
      clearInterval(playCheck);
    };
  }, 2000);
});

问题的关键在于，第一个视频决定了结果，而不是单独进行.each迭代。我希望lazy_anim类在开始播放时逐个视频地删除。

我对javascript和jquery缺乏经验，我只是想弄清楚自己的学习方式，因此请原谅我的无知。我一直在为此绞尽脑汁，但我一直无法弄清楚，对您的帮助表示感谢。

Answer 1

您似乎使事情变得复杂了很多。与其间隔每隔2秒检查一次视频元素的状态，不如挂起视频上的viewControllers = tabBarList.map { UINavigationController(rootViewController: $0) }和play事件并修改pause类基于此。试试这个：

lazy_anim

$('video').on({
  play: function() {
    $(this).next().removeClass('lazy_anim');
  },
  pause: function() {
    $(this).next().addClass('lazy_anim');
  }
});

video {
  width: 200px;
  display: block;
}

.lazy_anim {
  background-color: #C00;
}

Answer 2

您几乎在正确的轨道上。当您进入.each中的函数中时，那里已经有了正确的元素。不要再次查找，也不要使用.get(0)。您会有类似这样的内容：

$('video').each(function (indVideo, videoElement) {
    console.log(indVideo);
    var lazyLoader = videoElement.next();
    var playCheck = setInterval(function() {
        console.log(videoElement.paused);
        if (videoElement.paused) {
            console.log("paused!");
        } else {
            lazyLoader.removeClass('lazy_anim')
            console.log("playing!");
            clearInterval(playCheck);
        };
    }, 2000);
});

看看.each function API。

如何检测每个视频标签以及是否正在播放？

2 个答案: