Evento API Youtube a un'ora specificata

Question

È possibile tramite l'API di YouTube attivare un evento quando il video raggiunge un orario specificato? per esempio. quando il video raggiunge 20 sec. licenziare l'evento.

Grazie,
Mauro

Answer 1

non è sicuro se hai ancora bisogno di una risposta a questa (come io sto trovando 4 mesi dopo), ma ecco come ho realizzato questo con api iframe embed di YouTube. È brutto in quanto richiede un setInterval, ma non c'è davvero alcun tipo di evento "timeupdate" nell'API di YouTube (almeno non nelle API iframe), quindi devi fingere controllando il tempo del video ogni così spesso. Sembra funzionare bene.

Diciamo che si desidera avviare il lettore as shown here con YT.Player(), e si desidera implementare la propria funzione onProgress() che viene chiamato ogni volta che il video in tempo cambia:

In HTML:

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

In 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!"); 
    } 
} 

E 'un po' sciatto, che richiede un paio di variabili globali, ma si potrebbe facilmente refactoring in una chiusura e/o interrompere l'intervallo e avviare se stesso su play/pause includendo anche l'evento onStateChange quando si inizializza il lettore e scrivendo una funzione onPlayerStateChange che controlla la riproduzione e la pausa. Dovresti semplicemente separare la funzione updateTime() da onPlayerReady e chiamare strategicamente lo timeupdater = setInterval(updateTime, 100); e lo clearInterval(timeupdater); nei gestori di eventi giusti. See here per ulteriori informazioni sull'utilizzo di eventi con YouTube.

Answer 2

Penso che potresti dare un'occhiata a popcorn.js. È un progetto mozilla interessante e sembra risolvere il tuo problema.

Answer 3

Non sono sicuro se qualcuno è d'accordo qui, ma potrebbe preferire di usare setTimeout() su setInterval(), in quanto evita di usare i listener di eventi, ad esempio:

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

E 'un pseudocodice di base, ma si spera trasmette l'idea.