Question

一旦用户滚动到点开始播放视频，我就会尝试播放视频，然后不再播放。

我希望它能够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
  });

Answer 1

在视频结束事件中，使src为空Fiddle。

  $('#about-video').on('ended',function(){
     $(this).attr('src','');
   });

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

1 个答案: