スクロールでHTML5ビデオを一時停止または停止できますか？

Question

私はページの上部にHTML5ビデオバナーを持っています。それにはautoplayとloopという属性が追加されています。私がページを下にスクロールし始めると、ビデオが止まり、上にスクロールすると決して再開しません。ユーザーがスクロールするかどうかにかかわらず、ビデオの再生を続けさせていただきたいです。

解決策を示唆する属性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; 
} 

どれを助けていただければ幸いです。

Answer 1

あなたは以下のようにisInViewport jQueryプラグインを使用することができます。

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

Answer 2

それはあなたが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>