私のライブフィードは30秒ごとにリロードされます。動画を再生するときにどのように更新を停止しますか？

Question

私は自分のウェブサイトにライブフィードを作成しました。 30秒ごとにコンテンツがリロードされます。しかし、今私は問題があります。埋め込み動画（YouTubeから）またはHTML5 <video>を追加すると、リロードのために動画が完全に再生されません。ビデオの再生中に自動リロードを停止し、ビデオの停止時にリロードを再開することは可能ですか？

$(document).ready(function() { 
    $("#updates").load("updates.php"); 
    var refreshId = setInterval(function() { 
     $("#updates").load('updates.php' + '?randval=' + Math.random()); 
    }, 30000); 
    $.ajaxSetup({ 
     cache: false 
    }); 
}); 

あなたがビデオ私のここでのライブフィードすることができます

これは私がリロードのために使用するものです。

Answer 1

以下はテストされていません。 1つは事前に - 埋め込まれたYouTubeのiframeと同じようにhtml5動画要素を処理することはできません。 ビデオ要素がある場合は、直接ビデオ要素とやりとりできます。再生、一時停止、終了のイベントハンドラを使用してリクエストを処理します。可能な解決策は、このような何かを見ることができる：あなたが直接埋め込ま要素を制御することはできませんので、あなたがyoutube APIで作業する必要があります

$(function() { 
    var refreshId; 
    // collection of all video elements on your page 
    var videos = $('video'); 

    // disable reload by clearing the interval 
    function blockReload() { 
     clearInterval(refreshId); 
    } 

    // your existing reload function 
    function startReload() { 
     refreshId = setInterval(function() { 
      $("#updates").load('updates.php' + '?randval=' + Math.random()); 
     }, 30000); 
    } 

    // loop over all video elements on your page and bind 
    // three event handlers, one for playing, one for pausing 
    // and one for an ended video. 
    videos.each(function() { 
     this.addEventListener('playing', blockReload); 
     this.addEventListener('paused', startReload); 
     this.addEventListener('ended', startReload); 
    }); 
}); 

。

var player; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
    height: '360' 
    width: '640', 
    videoId: 'YOURVIDEOID', 
    events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
    } 
    }); 
} 

：

// This code loads the IFrame Player API code asynchronously. 
// you could also use a normal script tag in that case you would load 
// the lib each time. 
var tag = document.createElement('script'); 
tag.src = "http://www.youtube.com/player_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

次はあなたがスクリプトライブラリを介してビデオを読み込む： 代わりユーチューブからのiframeを使用して、あなたは（APIページから例）このようなビデオをロードするためにAPIを使用します

は今、あなたはユーチューブビデオと対話することができます

function onPlayerStateChange(event) { 
    // check if video is running... 
    if (event.data == YT.PlayerState.PLAYING) { 
    // disable interval 
    blockReload(); 
    } else { 
    // restart interval 
    startReload(); 
    } 
} 

Answer 2

を私が試行錯誤することにより、この解決策を見つけた（私はBlockreload() axel.michelの機能を使用してStartReload()）。

ビデオタグにonplay=""とonended=""を追加できます（オーディオタグでも機能します）。 onplay=""は関数Blockreload()をロードし、onended=""は関数StartReload()をロードします。それはこのようになります

：のStateChangeをキャプチャ

<video id="test" onplay="BlockReload()" onended="StartReload()" width="800" controls> 
    <source src="*video source*"> 
    Jouw browser ondersteund onze videoplayer niet. 
</video>