api - 指定された時間の Youtube API イベント

Question

動画が指定された時間に達したときに YouTube API を介してイベントを発生させることはできますか? たとえば、ビデオが 20 秒に達したとき。イベントを発生させます。

ありがとう、
マウロ

Answer 1

これに対する回答がまだ必要かどうかはわかりませんが（4か月後に見つけたので）、YouTubeのiframe埋め込みAPIを使用してこれを達成した方法を次に示します。setInterval が必要な点は見苦しいですが、YouTube API には (少なくとも iframe API には) "timeupdate" イベントは実際には存在しないため、毎回ビデオの時間をチェックして偽装する必要があります。しばしば。それはうまくいくようです。

ここに示すように YT.Player() を使用してプレーヤーを起動しonProgress()、ビデオの時間が変わるたびに呼び出される独自の関数を実装するとします。

HTML の場合:

<div id="myPlayer"></div>

JS で:

// first, load the YouTube Iframe API:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// some variables (global here, but they don't have to be)
var player;
var videoId = 'SomeYoutubeIdHere';
var videotime = 0;
var timeupdater = null;

// load your player when the API becomes ready
function onYoutubeIframeAPIReady() {
  player = new YT.Player('myPlayer', {
    width: '640',
    height: '390',
    videoId: videoId,
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when the player is ready, start checking the current time every 100 ms.
function onPlayerReady() {
  function updateTime() {
    var oldTime = videotime;
    if(player && player.getCurrentTime) {
      videotime = player.getCurrentTime();
    }
    if(videotime !== oldTime) {
      onProgress(videotime);
    }
  }
  timeupdater = setInterval(updateTime, 100);
}

// when the time changes, this will be called.
function onProgress(currentTime) {
  if(currentTime > 20) {
    console.log("the video reached 20 seconds!");
  }
}

少しずさんで、いくつかのグローバル変数が必要ですが、プレーヤーを初期化するときに onStateChange イベントを含め、onPlayerStateChange を記述することで、簡単にクロージャーにリファクタリングしたり、再生/一時停止時にインターバルを停止および開始したりできます。再生と一時停止をチェックする関数。updateTime() 関数を onPlayerReady から分離し、適切なイベント ハンドラで 戦略的にtimeupdater = setInterval(updateTime, 100);andを呼び出すだけで済みます。YouTube でイベントを使用する方法について詳しくは、こちらをご覧ください。clearInterval(timeupdater);

Answer 2

popcorn.jsを見たことがあると思います。これは興味深い mozilla プロジェクトであり、問​​題を解決しているようです。

Answer 3

誰かがここに同意するかどうかはわかりませんが、イベントリスナーの使用を避けるため、 setInterval() よりも setTimeout() を使用することを好むかもしれません。

function checkTime(){
    setTimeout(function(){
        videotime = getVideoTime();
        if(videotime !== requiredTime) {
             checkTime();//Recursive call.
        }else{
            //run stuff you want to at a particular time.
            //do not call checkTime() again.
        }
    },100);
}

これは基本的な疑似コードですが、アイデアが伝わることを願っています。