HTML5视频播放一旦滚动进入视图

HTML5 Video play once scrolled into view.

本文关键字：视图 滚动 视频 播放 HTML5      更新时间：2023-09-26

我有一些全屏视频背景，我想在它们滚动到视图中后播放。

我用于视频运行的代码如下。

<video id="video_background" preload="false" autoplay="false" loop="loop" volume="0"> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> Video not supported </video>

全屏效果很好，视频播放，我对它的外观很满意，但我有几个问题。

  1. 即使在我所处的位置，视频也没有考虑到autoplay="false"属性。页面一加载就立即播放。

  2. 当该部分滚动到视图中时，有人能告诉我播放html5视频的正确方向吗？我对每一位都使用了如下部分。

<div class="container"><video id="video_background" preload="false" autoplay="false" loop="loop" volume="0"> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> Video not supported </video></div></section>

当某个部分滚动到视图中时，我找不到任何可以启动该部分的内容。

有什么想法吗？

根据w3schools.com，如果您想要autoplay，则必须对autoplay进行编码，如果您不想要autoplay，则忽略。

要知道某个元素何时出现在视口中，您可以使用jquery.appear插件：

$('someselector').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport: play video
});
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
  // this element is now outside browser viewpor: Pause/stop video?
});

如果你不想使用这个jQuery插件，在这个StackOverflow问题中，可以接受的答案是：

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
   return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
相关文章：