javascript - HTML5 视频滚动到 View 后即可播放。

Question

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

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

<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. 当该部分滚动到 View 中时，有人可以指出我播放 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>

我找不到任何可以让我在滚动到 View 中时开始一个部分的内容。

有什么想法吗？

Answer 1

According to w3schools.com如果您想要自动播放，则必须对自动播放进行编码；如果您不想要自动播放，则必须忽略。

要知道某个元素何时出现在视口(viewport)中，可以使用 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要知道某些元素滚动到 View 中的位置是:

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