滚动到视图中即可播放HTML5视频. [英] HTML5 Video play once scrolled into view.

问题描述

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

I've got some fullscreen video backgrounds that I want to play once they're scrolled into view.

我用于视频播放的代码如下.

The code I'm using for the video running is as follows.

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

全屏效果很好，可以播放视频，我对它的外观感到非常满意，但是我遇到了一些问题.

The full-screen side works great, the video plays and I'm very happy with how it all looks but I've got a couple of issues.

1. 即使在我要说的那一点，视频也没有考虑到autoplay ="false"属性.页面加载后立即播放.

1. Even at the point I'm at, the video isn't taking into account the autoplay="false" attribute. It's instantly playing as soon as the page loads.

当该部分滚动到视图中时，有人可以指向我正确的方向播放html5视频吗?我对每一位都使用了以下部分.

Can someone point me in the right direction to play html5 video when the section is scrolled into view? I'm using sections such as the following for each bit.

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

当滚动到视图中时，我找不到让我开始一个部分的任何内容.

I can't find anything that will let me start a section when it scrolls into view.

有什么想法吗?

推荐答案

根据w3schools.com 仅在需要autoplay时，必须对autoplay进行编码，如果您不想使用autoplay，则必须忽略.

According to w3schools.com the autoplay must be coded just if you want autoplay, and ignore if you don't want autoplay.

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

To know when some element appears in the viewport yo can use 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插件，请访问这个 StackOverflow问题已接受的答复要知道某个元素在哪里滚动到视图中，是:

If you don't want to use this jQuery plugin, in this StackOverflow question the accepted response to know where some element is scrolled into view is:

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视频.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！