如何在滚动上播放暂停video

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

还有Jquery

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

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

编辑：

 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

您需要将您的函数绑定到scroll事件，并且还要从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; } 

Answer 2

我刚刚改进了这个，对于单个video，onscrollvideo暂停……这是html文件video.html

请参考此链接https://codepen.io/prashujack/pen/Jvmgxz谢谢。

  "use strict"; var wrapper = $('.wrapper'); wrapper.scrollTop(50); var vid2=document.getElementById("movie2"); wrapper.scroll(function(){ var st = wrapper.scrollTop(); if (st > 10) {vid2.pause();$("#movie2").addClass("animated hinge");} else {vid2.play(); $("#movie2").removeClass("animated hinge");} }); 

  .wrapper{ width: 400px; height: 600px; margin:20px auto; text-align:center; border:1px dashed grey; overflow-y: scroll; } 

         
 

 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur porro temporibus minima optio, labore perferendis, provident eveniet aliquid commodi dolorum debitis! Placeat porro omnis nam quod aut, enim quos optio laudantium repellendus eos soluta nostrum cumque mollitia neque ab dolores facere aliquam at voluptas. Cumque quam iste rerum odit veritatis tempore dolor aliquid, ex animi earum fugiat assumenda, voluptas deleniti sunt mollitia! Et obcaecati commodi, sed voluptatibus doloremque aperiam possimus quos nisi nulla veniam odit! Vitae optio debitis incidunt at doloremque eos earum maxime iusto nostrum excepturi, ipsum porro, aliquid architecto sed laboriosam fuga totam ut modi ipsa sit reprehenderit, iure magni unde.