滚动时自动暂停/播放 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>