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

Question

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

おかげで、
マウロここ

Answer 1

（私は4ヶ月後にそれを見つけることだとして）あなたはまだこの答えを必要とするかどうかわからないけど、私はユーチューブのiframeの埋め込みAPIでこれを達成する方法です。それはsetIntervalが必要であるという点で醜いですが、実際にはYouTube APIには（少なくともiframe APIではなく）あらゆる種類の「timeupdate」イベントはありません。したがって、毎回動画の時間を確認することで偽のものにする必要がありますしばしば。それはうまく動作するようです。

のは、あなたがYT.Player（）を使用してプレーヤーas shown hereを起動したいとしましょう、そしてあなたはと呼ばれている独自の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関数を作成したりすることで、再生/一時停止時にクロージャーに停止したり、間隔を停止したりすることができます。あなたは、onPlayerReadyからupdateTime（）関数を分離し、適切なイベントハンドラで戦略的にtimeupdater = setInterval(updateTime, 100);とclearInterval(timeupdater);を呼び出すだけでよいでしょう。 YouTubeでイベントを使用する方法の詳細については、See hereをご覧ください。

Answer 2

popcorn.jsをご覧ください。 これは面白いモジラプロジェクトです。あなたの問題を解決するようです。

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); 
} 

その基本的な擬似コードが、アイデアを伝えます。