How to detect each video tag and whether it's playing or not?

问题: I'm using yall.js to lazy load videos. It works as it should. However I want to add in a loading animation that will sit above the video until it starts playing, so that on...

问题:

I'm using yall.js to lazy load videos. It works as it should. However I want to add in a loading animation that will sit above the video until it starts playing, so that on slow connection you'll get the first frame and a little loading animation.

I can get the function to work for a singular video, but I want it to work for all videos automatically and individually as other pages will have more videos and I want to have a universal usable code for each page.

I'm using .each to detect all the videos which it seems to, but then I want to refer to each iteration to run code against those individual elements, but It's not working for me.

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

So the crux of the issue is that the first video is dictating the results and it's not for .each iteration individually. I want the lazy_anim class to be removed video by video as they begin to play.

I'm super inexperienced with javascript and jquery and I'm just trying to muddle my way through and learn as I go, so please forgive any ignorance on my part. I've been racking my head with this and I haven't been able to figure it out, any help is appreciated.


回答1:

You seem to have made this more complicated than it needs to be. Instead of having an interval which checks the state of the video elements every 2 seconds, it would make more sense to hook to the play and pause events on the videos and amend the lazy_anim class based on that. Try this:

$('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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video class="full lazy" controls loop muted playsinline autoplay>
  <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" alt="a video">
  Your browser does not support the video tag.
</video>
<div class="loader lazy_anim">Lazy anim...</div>

<video class="full lazy" controls loop muted playsinline>
  <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" alt="a video">
  Your browser does not support the video tag.
</video>
<div class="loader lazy_anim">Lazy anim...</div>

<video class="full lazy" controls loop muted playsinline>
  <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" alt="a video">
  Your browser does not support the video tag.
</video>
<div class="loader lazy_anim">Lazy anim...</div>


回答2:

You are almost on the right track. When you are inside the function in .each, you already have the right element there. Don't do lookup again and don't use .get(0). You would have something like this:

$('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);
});

Have a look at the .each function API.

  • 发表于 2019-07-07 16:17
  • 阅读 ( 209 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除