如何滚动播放暂停视频

Question

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

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

现在我不直接使用自动播放属性。请帮助我如何解决这个问题？

编辑 ：

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

                }   
            })
        })

仍然不起作用

Answer 1

您需要将函数绑定到滚动事件，并从autoplay实际的play() -pause()更改，请检查以下示例片段：

_{注意：我只是为了示例而从 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>