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


116

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?


1
Una solución IFrame como la que se muestra a continuación en stackoverflow.com/questions/5157377/… debería ser suficiente como solución alternativa.
S Meaden

Respuestas:


15

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.


77
La caducidad y el hecho de que solo funcione en un navegador específico hacen que esta solución sea bastante inútil.
pjv

1
¿Es capaz de reproducir TODOS los videos de youtube?
Raj Pawan Gumdal

2
Teóricamente, YouTube podría cambiar las URL de almacenamiento subyacentes para todos sus videos si quisieran en cualquier momento. srcProbablemente no se garantiza que la URL proporcionada en el atributo anterior funcione a largo plazo.
Chris Peters

1
Sí, información útil pero parece una mala idea. YouTube podría decidir cerrar el acceso al enlace de video directo en cualquier momento.
Oliver Moran

36

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! :)


Buena función y funciona en Mozilla y Chrome, pero cómo configurar el ancho y la altura del video si <video> tiene 100% de ancho y 200px de alto.
Anmol Ratan Mohla

Implementé esta solución, pero 2 días después, YT la bloqueó. Ya no funciona. :(
comienza

esto ya no funciona, lamentablemente. Solía ​​funcionar muy bien. ¡Espero que haya otra solución!
Chamilyan

19

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

Recientemente tuve este problema: ¡La pantalla completa ya no es compatible con iPad! Su jsfiddle-example es perfecto para ilustrarlo: en la PC funciona, en el iPad no. .. Supongo que debería hacer una nueva pregunta sobre esto, pero ¿alguien de aquí tal vez pueda comentar?
Snorvarg

1
@Snorvarg Mi respuesta debería funcionar en cualquier navegador compatible con HTML5, que siempre que esté ejecutando una versión bastante reciente de iOS (10+) en su iPad debería funcionar. Si no necesita controlar el video mediante programación, puede intentar usar la API de inserción de iframe simple. Puede encontrar un ejemplo aquí developers.google.com/youtube/iframe_api_reference#Examples , o ver la respuesta de vinayvasyani. Si aún tiene un problema, le haría una nueva pregunta utilizando las pautas "Cómo hacer una buena pregunta" que se encuentran en stackoverflow.com/help/how-to-ask .
Norman Breau

@Snorvarg Me encontré con este productforums.google.com/forum/#!topic/youtube/q7cAnPlN_-Y , un problema similar que ocurría en Firefox y se resolvió porque necesitaban solicitar permisos de pantalla completa. Así que estoy dispuesto a apostar que es por eso que la pantalla completa no funciona en su iPad, lo que desafortunadamente iOS Safari no parece ser compatible. Una solución alternativa es agregar su propio botón de pantalla completa y simplemente cambiar el tamaño del reproductor iframe al ancho / alto de su pantalla.
Norman Breau

1
Gracias por tus consejos y enlaces. Agregué una pregunta hace unos días, aquí: stackoverflow.com/questions/49650040/… Pero después de un tiempo, decidí hacer mi propio botón de pantalla completa como me propusiste, y funciona bien.
Snorvarg

Excelente, sin embargo, encontré el error "TypeError: YT.Player no es un constructor", como se describe aquí: stackoverflow.com/questions/52062169/… . Como señala la (única) respuesta, esto resulta de la carga del script asincrónico y la API aún no está lista cuando se llama. Esto se puede evitar implementando la onYouTubeIframeAPIReadyfunción (y colocando el último bloque de código del código anterior en su interior).
jakob.j


-3

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


-6

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>

23
¿ iframeEtiqueta "nueva" ? iframeha existido durante años ...
Zearin

11
Esta no es una solución a la respuesta, establece claramente una etiqueta de video y no un iframe ...
TGarrett

7
Quizás el OP simplemente no sabía sobre la existencia de la iframeetiqueta y es por eso que preguntó directamente sobre la videoetiqueta. De lo contrario, no habría preguntado si HTML5 (genéricamente) admite videos de Youtube, pero habría restringido la pregunta a la videoetiqueta. Incluso preguntó "¿hay alguna solución para eso?" en su última oración, por lo que esta respuesta es perfectamente válida.
Daniel Muñoz Parsapoormoghadam

1
Para incrustar videos de youtube.com en mi blog de blogger.com, iframe es la única solución conveniente. Además de eso, el código de inserción que genera youtube.com es una etiqueta iframe. Además, w3schools.com recomienda iframes: http://www.w3schools.com/html/html_youtube.asp . Donde no se menciona la etiqueta de video.
noobninja

1
Por si acaso alguien tiene curiosidad ... El problema es que usar una etiqueta de video no es el enfoque adecuado para los videos de YouTube porque las URL públicas para incrustar videos de YouTube no son un recurso de medios real. Es por eso que hay personas que sugieren usar iframes. Intentar usar una etiqueta de video significará que usará URL privadas que pueden cambiar en el futuro. Es como intentar acceder a un miembro privado en un lenguaje orientado a objetos. Puede ver la documentación oficial de YouTube aquí developers.google.com/youtube/iframe_api_reference#Examples
Norman Breau
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.