播放HTML5视频时，滚动到，然后播放，直到完成，只播放一次

Play HTML5 video when scrolled to, then play until completion and only play once

本文关键字：播放 一次 视频 HTML5 滚动 然后      更新时间：2023-09-26

我正在尝试播放一个视频直到它结束，一旦用户滚动到开始视频的点，然后不再播放它。

我想让它1.)开始播放一旦他们滚动2.)播放视频完成一旦它开始播放，3.)只播放一次，然后回退到海报图像。我如何在jQuery中做到这一点?

https://jsfiddle.net/tca0nyqs/-在这个小提琴，它重新启动每次用户滚动。

HTML 

<video id="about-video" preload="auto" poster="images/about-default.png">
<source src="images/about-work.mp4" type="video/mp4">   
</video>
jQuery 

$(document).ready(function() {
    // Get media - with autoplay disabled (audio or video)
    var media = $('#about-video').not("[autoplay='autoplay']");
    var tolerancePixel = 300;
    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);
  });

我是否应该以某种方式使用这个来检查视频是否已经播放了一次?

  $('#about-video').on('ended',function(){
     // code
  });

On Video ended Event make src null Fiddle.

  $('#about-video').on('ended',function(){
     $(this).attr('src','');
   });
相关文章：