2016-11-03 59 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(真)'? – 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

each(function( ){'循環。 – UltrasoundJelly