Come utilizzare il video di YouTube come sorgente nel tag "video" in HTML5

Question

Ho bisogno di dare il video di YouTube come sorgente al tag video in HTML5, una volta che il video ha finito di riprodurre l'evento "onended" verrà attivato in quello che scrivo una sorta di script che verrà eseguito.

<video id="videoSource" style="visibility:visible" width="1000" height="500" controls="controls" onended="hideVideo()"> 
<source src="**Youtube Video Link Goes here**" type="video/mp4" /> 
</video> 

<script type="text/javascript"> 
function hideVideo() { 
document.getElementById("videoSource").style.visibility="hidden"; 
} 
</script> 

Qui tutti lavorando bene con file video locale, unica cosa è che ho bisogno di dare un video di YouTube come fonte non funziona quindi per favore qualcuno sa aiutarmi .. Grazie in anticipo.

Answer 1

Html5 non supporta URL di YouTube, se avete bisogno di uno src video per il tuo sito è possibile fare:

Fase 1: aggiungi &html5=True al vostro URL di YouTube preferita

Fase 2: Trova <video/> tag nel sorgente

Fase 3: Aggiungere controls="controls" al tag video: <video controls="controls"..../>

Esempio:

<video controls="controls" 
     class="video-stream" 
     x-webkit-airplay="allow" 
     data-youtube-id="N9oxmRT2YWw" 
     src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&amp;itag=43&amp;ipbits=0&amp;signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&amp;sver=3&amp;ratebypass=yes&amp;expire=1300417200&amp;key=yt1&amp;ip=0.0.0.0&amp;id=37da319914f6616c"></video> 

Nota sembra che ci sia qualcosa di expire. Non so per quanto tempo funzionerà la stringa src.

Ancora in prova.

Si noti che questo video src è specifico per il browser che si utilizza per recuperare l'origine della pagina. Penso che Youtube generi questo HTML dinamicamente (almeno al momento) così nei test se copio in Firefox questo funziona in Firefox, ma non in Chrome.

Answer 2

Richiede un polyfill. Vai a http://html5polyfill.com/ e scorri verso il basso fino a "video" per ottenere un elenco aggiornato di ciò che è là fuori.

MediaElement.js è l'unico che ho usato, ha un evento "finito" che puoi collegare. Altri probabilmente lo fanno anche tu.