Cargar un vídeo de diferentes formatos con HTML5

12/Ene/2012 HTML5 3 Comentarios

En el ejemplo cargar un vídeo con HTML5 veíamos una forma sencilla de cargar un vídeo del formato Ogg con código HTML5. En este caso vamos a ver cómo cargar un vídeo desde diferentes orígenes con diferentes formatos.

Es decir, vamos a indicarle a nuestro navegador dónde puede encontrar diferentes formatos. Esto se hace así debido a que el navegador puede no reconocer y cargar alguno de los formatos. En ese caso, al indicarle una lista, cargará el primero de los formatos que consiga interpretar.

Recordamos los formatos con los que se trabaja en HTML5:

  • MPEG-4, extensiones .mp4 o .m4v
  • Flash, la extensión .flv
  • Ogg, la extensión .ogv
  • WebM, extensión .webm

Si el formato es único nos vale con indicar el origen en el atributo src del elemento VIDEO.

  1. <video src="/videos/tecla.ogv" controls>
  2. Tu navegador no soporta el elemento <code>video</code>.
  3. </video>

Pero para cargar un vídeo de diferentes formatos con HTML5 tenemos que apoyarnos en el elemento SOURCE. El elemento SOURCE contendrá un atributo src que indique el origen del vídeo y otro atributo type dónde indicaremos el tipo del elemento multimedia que vamos a cargar.

El elemento SOURCE será un elemento anidado dentro del elemento VIDEO.

Así, nuestro código para que el vídeo pueda ser cargado de diferentes formatos es el siguiente:

  1. <video controls>
  2. <source src="/videos//tecla.ogv" type="video/ogg"></source>
  3. <source src="/videos/tecla.mp4" type="video/mp4"></source>
  4. <source src="/videos/tecla.webm" type="video/webm"></source>
  5. Tu navegador no soporta el elemento <code>video</code>
  6. </video>

Vídeos sobre HTML5


3 comentarios en “Cargar un vídeo de diferentes formatos con HTML5”

Víctor Cuervo

keyvin2012

Muy buen explicación

De aporte dejo esta opción Cargar un video html5 de diferentes formatos con jquery

1 – Necesitamos el frameworks jquery v-1.7.1 descargar de http://jquery.com/

2 – Crearemos un js llamado videohtml5.js en el cual guardaremos:

// Empezamos la function encapsulando $ para que no tenga problema con otros frameworks

(function ($) {

// Creamos el nombre de nuestro plugin y llamamos a options para llamar la url del video desde el

$.fn.Videohtml5 = function (options) {

// Variable con opción para llamar url sin formato y formato del video

var video_src = options.video_src, formato = document.createElement("video"), ext;

// Comprobamos ext nativas de navegador

if (formato.canPlayType) {

// Establecemos el ext variable a cualquier formato de archivo compatible con el navegador

ext =
(!!formato.canPlayType && "" != formato.canPlayType('video/ogg') ? "ogv" :
(!!formato.canPlayType && "" != formato.canPlayType('video/mp4') ? "mp4" :
(!!formato.canPlayType && "" != formato.canPlayType('video/mp4') ? "m4v" :
(!!formato.canPlayType && "" != formato.canPlayType('video/webm') ? "webm" :
false
))));

}

// Añadimos un a con el archivo y el formato de archivo correcto

source = '';

// Llamamos y lo proyectamos en de la pagina con

$('#player').append('' + source + '');

} // Cerramos Plugin

})(jQuery); // Cerramos encapsulación

3 – luego entre colocamos

// Llamamos la función, el plugin Videohtml5 y las opciones necesarias como url del video sin formato

$(document).ready(function () {
$("video").Videohtml5({
video_src: "ruta-del-video/nombre-del-video-sin-el-formato"
});
});

4 – Luego dentro de Colocamos

Y listo ya tenemos una carga de video desde jquery con forma de plugin jquery

saludos desde venezuela

Responder a keyvin2012 Cancelar respuesta

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*