これを実現する方法は、実際にgetCurrentTime
はyt apiのメソッドを使用することです。具体的には、の助けを借りて繰り返し関数で呼び出しますsetInterval
。
提示したいオーバーレイの配列を、開始時間と終了時間とともに、次のように保持する必要があります。
var overlays = [
{text:"Some text",from:1,to:6},
{text:"Some other text",from:8,to:14}];
次に、映画の再生と停止(または一時停止)を処理するためのいくつかの関数が必要になります。
var watchId;
function startWatch(){
watchId = setInterval( function(){
showOrHideOverlay(ytplayer.getCurrentTime());
},1000)
}
function stopWatch(){
clearTimeout(watchId);
}
変数を使用していることに気付くでしょう。jsapiytplayer
のドキュメントによると、これは次のコードを使用して取得できます。
var ytplayer ;
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
イベントリスナーが添付されていることに注意してください。これにより、映画の状態の変化を処理するメソッドが表示されます。
function onytplayerStateChange(newState) {
if(newState == 1){ // playing
startWatch()
}
else if(newState == 0 || newState == 2){ //ended or paused
stopWatch();
}
}
つまり、パズルの最後のピースは、実際には毎秒発生するように設定された「ダニ」を処理しています。このメソッドshowOrHideOverlay
は次のようになります。
function showOrHideOverlay(time){
// find overlays which should be visible at "time"
var shownOverlays = false;
for(var i=0;i<overlays.length;i++){
if(overlays[i].from < time && overlays[i].to > time){
$('#overlay').text(overlays[i].text);
shownOverlays = true;
}
}
if(!shownOverlays)
$('#overlay').text("");
}
最後に、ライブの例: http: //jsfiddle.net/zTZjU/(クリップの再生を押すだけです)