1

ページにYouTubeクリップをロードしたいのですが、クリップと一緒に、YouTube独自の注釈機能のように機能するトップ（HTML）レイヤーを追加したいと思います。

箇条書き：-ユーザーにはYTクリップが表示されます（おそらくカスタムプレーヤーで）-クリップの現在の時刻に応じて、クリップの上のレイヤーに情報をロードするためにJSが必要です。

したがって、たとえば、0.00から0.05までは、クリップの上にテキストが表示されます。0.05から0.30までは、テキストはありません。0.30から0.37までは、テキストが再び表示されます。

これにアプローチする方法について何かアイデアはありますか？YoutubeのPlayerAPIにはgetCurrentTimeの機能があることに気付きまし たが、クリップの上にあるdivレイヤーのクリップと「一緒に再生」するJSをどのように作成すればよいでしょうか。

4

2 に答える 2

2

これを実現する方法は、実際に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/（クリップの再生を押すだけです）

于 2011-09-05T10:48:47.630 に答える
0

このフィドルを確認してください：http：//jsfiddle.net/rEeJS/オーバーレイをChromeに表示できるよう
に追加しました。wmode="transparent"

于 2012-03-17T16:21:02.710 に答える