你可以停止滚动的HTML5视频暂停/停止吗？

我在页面顶部有一个HTML5视频横幅。它添加了autoplay和loop属性。当我开始向下滚动页面时，视频停止并且在向上滚动时从不重新启动。无论用户是否滚动，我都希望视频继续播放。你可以停止滚动的HTML5视频暂停/停止吗？

似乎没有任何建议解决方案的属性listed in the W3C spec，那么是否有另一种禁用此功能的方法？

的HTML和CSS是非常简单的，所以我想知道如果我需要一些JS沿途帮助：

HTML：

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

CSS：

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

任何帮助将不胜感激。

来源

2016-09-15 abbas_arezoo

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

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

来源

2016-09-15 08:42:03

它工作正常，我，如果您想改变yiur视然后在我的代码更改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>

来源

2016-09-15 09:24:15

你可以停止滚动的HTML5视频暂停/停止吗？

回答

相关问题