¿Mostrar la fuente de video de Youtube en la etiqueta de video HTML5?

Estoy intentando poner una fuente de video de YouTube en la <video>etiqueta HTML5 , pero parece que no funciona. Después de buscar en Google, descubrí que HTML5 no es compatible con las URL de videos de YouTube como fuente.

¿Puedes usar HTML5 para incrustar videos de YouTube? Si no es así, ¿hay alguna solución?

Paso 1: agregue &html5=Truea su URL favorita de youtube

Paso 2: busque la <video/>etiqueta en la fuente

Paso 3: agregar controls="controls"a la etiqueta de video:<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>

Tenga en cuenta que parece que hay algunas expirecosas. No sé cuánto tiempo funcionará la srccuerda.

Todavía me estoy probando.

Editar (28 de julio de 2011) : tenga en cuenta que este archivo de vídeo es específico del navegador que utiliza para recuperar la fuente de la página. Creo que Youtube genera este HTML dinámicamente (al menos actualmente), así que en las pruebas, si copio en Firefox, esto funciona en Firefox, pero no en Chrome, por ejemplo.

Esta respuesta ya no funciona, pero estoy buscando una solución.

A partir de . 2015/02/24. hay un sitio web (youtubeinmp4) que le permite descargar videos de youtube .mp4 format, puede explotar esto (con algo de JavaScript) para salirse con la suya incrustando videos de youtube en <video>etiquetas. Aquí hay una demostración de esto en acción.

Pros

• Bastante fácil de implementar .
• En realidad, la respuesta del servidor es bastante rápida (no se necesita mucho para recuperar los videos).
• Abstracción (la solución aceptada, incluso si funcionara correctamente, solo sería aplicable si supiera de antemano qué videos iba a reproducir, esto funciona para cualquier URL ingresada por el usuario).

Contras

• Obviamente, depende de los youtubeinmp4.comservidores y su forma de proporcionar un enlace de descarga (que se puede pasar como <video>fuente), por lo que esta respuesta puede no ser válida en el futuro.

• No puedes elegir la calidad del video.

JavaScript (después load)

videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
    var video = videos[i];
    var src = video.src || (function () {
        var sources = video.querySelectorAll("source");
        for (var j = 0, sl = sources.length; j < sl; j++) {
            var source = sources[j];
            var type = source.type;
            var isMp4 = type.indexOf("mp4") != -1;
            if (isMp4) return source.src;
        }
        return null;
    })();
    if (src) {
        var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
        if (isYoutube) {
            var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
            id = (id.length > 1) ? id.splice(1) : id;
            id = id.toString();
            var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
            video.src = mp4url + id;
        }
    }
}

Uso (completo)

<video controls="true">
    <source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>

Formato de video estándar.

Uso (Mini)

<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>

Un poco menos común pero bastante más pequeño, utilizando la URL abreviada youtu.becomo srcatributo directamente en la <video>etiqueta.

¡Espero eso ayude! :)

La <video>etiqueta está destinada a cargarse en un video de un formato compatible (que puede diferir según el navegador).

Los enlaces de inserción de YouTube no son solo videos, generalmente son páginas web que contienen lógica para detectar lo que su usuario admite y cómo pueden reproducir el video de YouTube, usando HTML5, flash o algún otro complemento basado en lo que está disponible en la PC del usuario. Es por eso que está teniendo dificultades para usar la etiqueta de video con videos de YouTube.

YouTube ofrece una API de desarrollador para incrustar un video de YouTube en su página.

Hice un JSFiddle como ejemplo en vivo: http://jsfiddle.net/zub16fgt/

Y puede leer más sobre la API de YouTube aquí: https://developers.google.com/youtube/iframe_api_reference#Getting_Started

El Código también se puede encontrar a continuación

En tu HTML:

<div id="player"></div>

En su Javascript:

var onPlayerReady = function(event) {
    event.target.playVideo();  
};

// The first argument of YT.Player is an HTML element ID. 
// YouTube API will replace my <div id="player"> tag 
// with an iframe containing the youtube video.

var player = new YT.Player('player', {
    height: 320,
    width: 400,
    videoId : '6Dc1C77nra4',
    events : {
        'onReady' : onPlayerReady
    }
});

La respuesta más sencilla la da W3schools. https://www.w3schools.com/html/html_youtube.asp

1. Sube tu video a Youtube
2. Anote la identificación del video
3. Ahora escribe este código en tu HTML5.

<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>

¿ Qué tal si lo hace de la forma en que lo hace hooktube ? en realidad, no usan la URL del video para el elemento html5, sino la URL del redirector de video de Google que llama a ese video. mira aquí como presentan un video aleatorio de despacito ...

<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&amp;mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>

el código es para la siguiente página de videos https://hooktube.com/watch?v=72UO0v5ESUo

Youtube a mp3 por otro lado, se ha convertido en un monstruo extremadamente monetizado que ahora devuelve download.html en la mitad de las solicitudes de descarga de videos ... molesto ...

los 2 enlaces en esta respuesta son a mis experiencias personales con ambos recursos. cómo hooktube es agradable y fresco y en realidad ayuda a evitar la censura y las restricciones geográficas ... compruébalo, es muy bueno. y youtubeinmp4 es un monstruo emergente ahora conocido como ConvertInMp4 ...

Con la nueva etiqueta iframe incrustada en su sitio web, el código detectará automáticamente si está utilizando un navegador compatible con HTML5 o no.

El código de iframe para incrustar videos de YouTube es el siguiente, simplemente copie el ID de video y reemplácelo en el siguiente código:

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>