HTML5 视频播放一旦滚动到视图中。

Question

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

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

<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>

我找不到任何可以让我在某个部分滚动到视图中时开始它的内容。

有什么想法吗？

Answer 1

According to w3schools.com autoplay 必须在你想要autoplay 时被编码，如果你不想要autoplay 则忽略。

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

$('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 插件，请在 this StackOverflow 问题 the accepted response 中了解某些元素滚动到视图中的位置是：

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));
}