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

Intento incluir una fuente de video de YouTube en la etiqueta HTML5 , pero parece que no funciona. Después de buscar en Google, descubrí que HTML5 no admite URL de video de YouTube como fuente.

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

Paso 1: agrega &html5=True a tu URL favorita de youtube

Paso 2: busca la etiqueta en la fuente

Paso 3: Agregue controls="controls" a la etiqueta de video:

Ejemplo:

  

Tenga en cuenta que parece que algunas cosas expire . No sé cuánto tiempo funcionará la cuerda de src .

Todavía me estoy poniendo a prueba.

Editar (28 de julio de 2011) : tenga en cuenta que este video es específico del navegador que usa para recuperar el origen de la página. Creo que Youtube genera este HTML dinámicamente (al menos en la actualidad), por lo que al probar 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 en .mp4 format , puede aprovechar esto (con algunos JavaScript) para dejar de incrustar videos de youtube en tags de . Aquí hay una demostración de esto en acción.

Pros

  • Bastante fácil de implementar .
  • Respuesta del servidor bastante rápida en realidad (no se necesita mucho para recuperar los videos).
  • Abstracción (la solución aceptada, incluso si funcionó 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 servidores de youtubeinmp4.com y de su forma de proporcionar un enlace de descarga (que se puede pasar como una fuente de ), por lo que esta respuesta puede no ser válida en el futuro.

  • No puedes elegir la calidad del video.


JavaScript (después de la 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)

  

Formato de video Standart.

Uso (Mini)

  

Un poco menos común pero bastante más pequeño, usando la url acortada de youtube.be y el atributo src directamente en la etiqueta .

¡Espero eso ayude! 🙂

La etiqueta está destinada a cargar 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, utilizando HTML5 o flash, o algún otro complemento basado en lo que está disponible en la PC de los usuarios. Es por eso que está teniendo dificultades para usar la etiqueta de video con videos de YouTube.

YouTube ofrece una API de desarrollador para insertar un video de youtube en tu página.

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

Y puede leer más acerca de 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:

 

En tu Javascript:

 var onPlayerReady = function(event) { event.target.playVideo(); }; // The first argument of YT.Player is an HTML element ID. // YouTube API will replace my 
tag // with an iframe containing the youtube video. var player = new YT.Player('player', { height: 320, width: 400, videoId : '6Dc1C77nra4', events : { 'onReady' : onPlayerReady } });

No hay forma de hacer esto sin Javascript. Pero la maravillosa biblioteca MediaElement.js funcionará maravillosamente para este propósito:

http://mediaelementjs.com/examples/?name=youtube

El ejemplo anterior muestra el uso de un video de YouTube con una etiqueta , pero también tiene un respaldo para Flash para los navegadores que no lo admiten.

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

El código iframe para incrustar videos de YouTube es el siguiente, simplemente copie la identificación del video y reemplácela en el código siguiente:

  

Pasos a seguir:

  1. Abra el link video de su Youtube.
  2. Haga clic derecho en video. (A veces, mantenga presionado el botón derecho)
  3. Haga clic en “Copiar código incrustado”. (Copiará automáticamente el HTML Code )
  4. Pégalo en tu propio HTML .

¿ Qué tal si lo haces como lo hace el hooktube ? en realidad, no usan la URL del video para el elemento html5, sino la URL del redirector de video de google que invoca ese video. echa un vistazo aquí cómo presentan algunos video aleatorio despacito …

  

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

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

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