css 你能阻止HTML5视频在滚动时暂停/停止吗？

jxct1oxe 于 2023-02-14 发布在 HTML5

关注(0)|答案(4)|浏览(268)

我的页面顶部有一个HTML5视频横幅。它添加了autoplay和loop属性。当我开始向下滚动页面时，视频停止，并且在我向上滚动时不会重新启动。我希望无论用户是否滚动，视频都能继续播放。
似乎没有任何属性listed in the W3C spec建议解决方案，那么是否有其他方法可以禁用此功能？
HTML和CSS非常简单，所以我想知道我是否需要一些JS来帮助：
超文本：

<video preload="none" autoplay loop>
  <source src="/media/test.mp4" type="video/mp4">
</video>

CSS：

video {
  width: 100%;
  height: auto;
}

任何帮助都将不胜感激。

css

来源：https://stackoverflow.com/questions/39506254/can-you-stop-a-html5-video-pausing-stopping-on-scroll

4条答案

按热度按时间

mm5n2pyu1#

您可以使用isInViewport jQuery插件如下：

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})

赞(0）回复(0）举报 2023-02-14

pftdvrlh2#

它对我来说很好用，，如果你想改变你的视口，那么在我的代码中改变fraction = 0.5;

var videos = document.getElementsByTagName("video"),
fraction = 0.5;
function checkScroll() {

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

        var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
            b = y + h, //bottom
            visibleX, visibleY, visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);

            if (visible > fraction) {
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

div {padding-top:300px; width:320px;}

video {
   
    padding-bottom:300px;    
   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

<video id="video1" preload="auto"  loop="loop">
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">>
  bgvideo
</video>
    


</div>

赞(0）回复(0）举报 2023-02-14

imzjd6km3#

这可以通过使用属性data-keepplaying来禁用。

<video preload="none" autoplay loop>
  <source src="/media/test.mp4" type="video/mp4">
</video>

赞(0）回复(0）举报 2023-02-14

kkih6yb84#

如果使用fullpage.js

<video autoplay muted loop data-keepplaying>
   <source src="myvide.mp4" type="video/mp4">
</video>

作品

赞(0）回复(0）举报 2023-02-14

我来回答

css 你能阻止HTML5视频在滚动时暂停/停止吗？

4条答案

相关问题

热门标签

最新问答