video标签的视频脱离视窗后暂停播放 教程
2025-05-02 07:14:41

在视频播放页面加入一下代码

<script>
// video脱离视窗暂停播放
window.addEventListener('scroll', debounce(checkVideoVisibility, 100));
window.addEventListener('resize', debounce(checkVideoVisibility, 100)); // 窗口Resize时触发
function checkVideoVisibility() {
  document.querySelectorAll('video').forEach(video => {
    const rect = video.getBoundingClientRect();
    const isFullyOut = 
      rect.top > window.innerHeight || 
      rect.bottom < 0 || 
      rect.left > window.innerWidth || 
      rect.right < 0;
    if (isFullyOut && !video.paused) {
      video.pause();
      console.log('已暂停:', video.src);
    }
  });
}
function debounce(func, delay) {
  let timer;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(context, args), delay);
  };
}
checkVideoVisibility();
</script>

以上代码只在typecho普通列表测试通过,其他未测试

最新回复 (0)
返回
TAG
标签云