自动暂停/播放滚动Javascript自动播放视频html5

Question

我正在尝试用JS创建html5视频库。我有它，你可以从左到右滚动之间的静音自动播放html5视频和视频将播放/暂停时滚动到/离开。

笔代码

我遇到的问题是，当用户调整任何html5控件上滚动的自动原因将不再工作。我可以关闭用户视频控制，但我仍然需要一种方法来切换音频打开/关闭。我为它添加了一个按钮，但即使当用户从按钮切换音频时，滚动暂停/播放JS停止工作。

希望这是有意义的。谢谢你的帮助!

Jquery的自动播放/暂停:

$(window).scroll(function(){
var scroll = $(this).scrollTop();
scroll > 300 ? myvid.pause() : myvid.play()
}) ```

Answer 1

我在其他问题中找到了答案，这对我来说是工作:

如何在滚动时播放暂停视频

正如DaniP之前所说:

您需要将函数绑定到滚动事件，并从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>