如何更改帖子中的“自动播放”属性

Question

我有一个问题，我的 WordPress 博客嵌入了来自 Imgur 的视频。它在加载时自动播放。它也会自动循环。它与此嵌入 HTML 完美配合。但是，当我们将其滚动到屏幕外时，它并没有停止。滚动时如何停止它？谢谢

<center><video style="max-width: 100%; height: auto;" preload="auto" autoplay="autoplay" loop="loop" controls="controls" width="450" height="auto"><source src="https://i.imgur.com/84FAg6j.mp4" /></video></center>

Answer 1

我刚刚添加id到视频标签，我刚刚使用了基于滚动位置的 jQuery 播放和暂停选项。希望这会帮助你。

var sec_position = $('#sec').offset().top;
var vid = document.getElementById('video');
$(window).on('scroll', function() {
  var window_position = window.pageYOffset;
  if (sec_position < window_position) {
    vid.pause();
  } else {
    vid.play();
  }
});

#sec {
  height: 500px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><video id="video" style="max-width: 100%; height: auto;" preload="auto" autoplay="autoplay" loop="loop" controls="controls" width="450" height="auto">
    <source src="https://i.imgur.com/84FAg6j.mp4" /></video></center>
<div id="sec"></div>