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>

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

即使在我所处的位置，视频也没有考虑到autoplay =“false”属性。它会在页面加载后立即播放。
当该部分滚动到视图中时，有人能指出我正确的方向播放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));
}

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

1 个答案: