2016-11-03 8 views
0

各ビデオがビューポートの中央に達すると一時停止/再生しようとしています。ビデオがビューポートの中心にあるときにビデオを一時停止/再生するJWPlayer

私はJWPlayerを使用していますが、ページ上の他のすべてのビデオを一時停止し、現在の再生をビューポートに表示することに問題があります。

https://jsfiddle.net/vv7jbrv6/1/

function onScrollVideo() { 
    updateVideo(); 
} 

function updateVideo() { 

    var windowHeight = $(window).height(), 

    gridTop = 200, 
    gridBottom = 1000; 

    $('.jwplayer').each(function() { 
    var thisTop = $(this).offset().top - $(window).scrollTop(), 
    playerID = $(this).prop('id'); 

    if (thisTop > gridTop && (thisTop + $(this).height()) < gridBottom) { 
    jwplayer(playerID).play(); 

    } else { 
    jwplayer(playerID).on('pause'); 

    } 

    }); 

} 
window.addEventListener('scroll', onScrollVideo, false); 
+0

あなたは '' jwplayer(playerID).pause(true)を試してみましたか? – UltrasoundJelly

+0

ビューポートでhtml5ビデオを再生するさまざまな方法について議論する私の似たような質問ですが、あなたの問題はjwplayer APIにあると思います。 http://stackoverflow.com/questions/21163756/html5-and-javascript-to-play-videos-only-when-visible/40011508#40011508 – UltrasoundJelly

答えて

0
jwplayer(playerID).pause(true); 

JSfiddle

+0

ここで成功しましたか? – UltrasoundJelly

+0

彼らはあなたが '$( '。jwplayer')に決して入らないように、https://jsfiddle.net/vv7jbrv6/4/ – Bowen

+0

のように見えます。 ){'ループ。 – UltrasoundJelly

関連する問題