Cómo usar el video de youtube como fuente en la etiqueta "video" en HTML5

Question

Necesito dar el video de youtube como fuente a la etiqueta de video en HTML5, una vez que el video termine de reproducir el evento "activado" se disparará cuando escriba algún tipo de script que se ejecutará

<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> 

Aquí todo funciona bien con el archivo de vídeo local, es lo único que necesito para dar un vídeo de YouTube como fuente que no está funcionando así que por favor cualquiera sabe que esto me ayude .. Gracias de antemano.

Answer 1

Html5 no admite URL de YouTube, Si necesita un src vídeo para su sitio que puede hacer:

Paso 1: agregar &html5=True a su URL de YouTube favorito

Paso 2: Encuentra <video/> etiqueta de fuente

Paso 3: Añadir controls="controls" a etiqueta de vídeo: <video controls="controls"..../>

Ejemplo:

<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, parece que hay algunas cosas expire. No sé cuánto tiempo funcionará la cadena src.

Todavía me pongo a prueba.

Tenga en cuenta que este video es específico para el navegador que utiliza para recuperar el origen de la página. Creo que Youtube genera este HTML de forma dinámica (al menos actualmente), por lo que al probarlo, si copio en Firefox esto funciona en Firefox, pero no en Chrome.

Answer 2

Requiere un relleno policristalino. Diríjase a http://html5polyfill.com/ y desplácese hacia abajo hasta "video" para obtener una lista actualizada de lo que hay disponible.

MediaElement.js es el único que he usado, tiene un evento "finalizado" que puede enganchar. Otros probablemente también.