如何在滚动上播放暂停视频 [英] How to play pause video on scroll

问题描述

我想在滚动时播放或暂停视频，如果滚动大于 300 ，它应暂停，否则应播放。这是我的视频标记

I want to play or pause video on scroll, if scroll is greater than 300 it should pause otherwise it should play. This is my video tag

<video width="100%" controls >
   <source src="video.mp4" type="video/mp4"  >
 </video>

和Jquery

$(document).ready(function(){
    var scroll = $(window).scrollTop();
    if(scroll > 300){ 
        $('video').attr('autoplay':'false')
    }
    else{
        $('video').attr('autoplay':'true')
    }
})

现在我没有直接使用autoplay attr。请帮帮我怎么解决这个问题？

Now I'm not using autoplay attr directly. Please help me how can I fix this ?

修改：

i updated my code to this 
$(document).ready(function(){
            $(window).scroll(function(){
                var scroll = $(window).scrollTop();
                    if(scroll > 300){ 
                    $('#videoId').get(0).pause()    ; 
                    }
                else{
                    $('#videoId').get(0).play();

                }   
            })
        })

仍然不起作用

推荐答案

你需要绑定你的函数到滚动事件，也从更改自动播放实际 play（） - pause（），请查看此示例代码段：

You need to bind your function to the scroll event and also change from autoplay to actually play() - pause(), check this example snippet:

_{注意：我已从300更改为70仅作为示例，但您可以根据需要保留断点}

var myvid = $('#myVid')[0];
$(window).scroll(function(){
  var scroll = $(this).scrollTop();
  scroll > 70 ? myvid.pause() : myvid.play()
})

body {
  background:#e1e1e1;
  height:1000px;
}
video {
  display:block;
  width:300px;
  margin:0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myVid" width="100%" controls autoplay>
  <source type="video/mp4" src="http://html5demos.com/assets/dizzy.mp4">
</video>

这篇关于如何在滚动上播放暂停视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！