Como ya se ha explicado en el tutorial anterior de el Uso básico de la etiqueta Audio en HTML5, la etiqueta VIDEO también tiene un peso muy fuerte en HTML5 por que viene a facilitarnos las cosas en cuanto a la necesidad de agregar contenido audio visual en nuestra pagina Web. Agregar video en HTML5 no tiene mucha complejidad, es parecido a la etiqueta AUDIO, es muy fácil y rápido de escribir.
Veamos como se usa la etiqueta video
La etiqueta <video> es la etiqueta que mas fama se hizo ya que el video en Internet implica muchas innovaciones desde que Flash Player nos propuso usar video con calidad HD y el codec H.264, ejemplos como YouTube nos dejaron ver el poder del video en Internet.
Vista previa del reproductor por defecto de Firefox
La manera mas importante de implementarla es de esta manera:
<video src="video.mp4" width="640" height="360" controls autoplay preload></video>
Expliquemos los atributos de la etiqueta:
- SRC: Nos enlaza el archivo de video que queremos reproducir.
- WIDTH: Nos define el ancho del video en pixeles.
- HEIGHT: Nos define la altura del video en pixeles.
- CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen.
- AUTOPLAY: Nos permite reproducir el archivo de video desde que se carga la pagina.
- PRELOAD: Nos carga un poco el archivo de video antes de iniciar la reproducción en el buffer para que no se trabe por reproducir mas de lo que carga.
Los atributos de esta etiqueta como pueden ver son casi los mismos que en la etiqueta de AUDIO pero como es algo visual, necesitamos darle un ancho y un alto forzosamente.
Implementación de formatos de video
Al igual que en la etiqueta AUDIO tenemos muchos formatos de video que debemos implementar ya que cada motor de renderizado de los navegadores tiene soporte para un codec de video diferente.
Veamos la tabla de compatibilidad
- Gecko: OGG
- WebKit: OGG, H.264, WebM
- Safari e Internet Explorer 9 (WebKit – Trident): H.264
- Presto: OGG, H.264
Ya que sabemos que tipos de codecs acepta cada navegador, podemos pasar a la siguiente parte de este tutorial. Hay que hacer que todos los navegadores acepten en la etiqueta video todos los formatos de video.
Ahora tiene un poco de complejidad igual que en AUDIO solo hay que poner los diferentes SOURCE para cada formato de video.
<video width="640" height="360" controls autoplay preload> <source src="mivideo.mp4" type='video/mp4; codecs="avc1,mp4a"' /> <source src="mivideo.ogv" type='video/ogg; codecs="theora,vorbis"' /> <source src="mivideo.webm" type='video/webm; codecs="vp8,vorbis"' /> </video>
Como ven, la diferencia es poca, ahora solo quitamos el atributo SRC y agriamos los SOURCE de los diferentes archivos de video.
- SRC: Nos enlaza el archivo de video que queremos reproducir.
- Type: Le decimos que tipo de video o codec va reproducir
Es bastante fácil de usar esta etiqueta y podemos jugar mucho con los estilos de CSS para darle estilo, y si practicamos mucho podemos empezar a crear un reproductor mas personalizado.
En Internet Explorer 9 podemos usar el formato WEBM con un Plugin de Google para los que quieran tener soporte de este formato.
Y algunas herramientas para convertir videos a otros formatos
Es todo para empezar con esta etiqueta, gracias por leernos y suerte con la práctica.
che, mira, cuando lo implemento, dentro de un documento html, no me reproduce, y kiero por ejemplo, cargar los videos desde una base de datos, y no me deja, como puedo hacer, me puedes ayudar?
Gracias
que ta amigo, tengo un problema, hay algunos videos en formato mp4 que cuando los coloco entre tag video me los lee excelente el navegador en este caso chrome, pero hay algunos que no lo hace, y son igual de formato mp4, lo que estoy intentando hacer es que me pasan video en formato flv por ejemplo y con atube captcher les cambio el formato a mp4 pero nada, no reconoce el video! porque sera eso?
Pero que formatos de vídeo se admiten?
Gecko: OGG
WebKit: OGG, H.264, WebM
Safari e Internet Explorer 9 (WebKit – Trident): H.264
Presto: OGG, H.264
Claro que te puedo ayudar, para eso estamos, que necesitas, si nos explicas mejor tu problema o nos escribes el codigo que usas seria mejor.
hola mira, si, lo ke preciso es hacer streaming de video, tengo un server wowza, pero lo ke kiero es guardar los datos en una base de datos, y abrir una URL desde la web, o sea el administrador sube los videos para el server, y ke me haga un streaming de video, pk seria para dispositivos moviles, la base de datos seria en MYSQL y php, muchas gracias ppor el sitio, es joven pero aborda un tema muy bueno HTML 5, saludos
Mira Erick, no tengo experiencia con Wowza Server, pero si tu idea es hacer Streaming de video, ya sea en vivo o no, el Wowza deve darte los enlaces directos al archivo de video, webm, mp4 y ogv, el lado dinamico no es ningún problema por que solo seria sustituir el Source. Y pues, para subirlos no le veo problema, tu problema con solo deve radicar en los formatos de video y el como lo enlazas.
Hola, si el problema es ese mismo, a la hora de ke me habra los enlaces, pues he guardado por ejemplo url de youtube y me habre solo algunas pocas, otras no, y no se ke es lo ke pasa, pues deberia habrirme todas las URL no?, local sin problemas ninguno, mi problema es con las URL, ahi es donde se me complica todo, si me puedes pasar algun ejemplo para abrir con url, te lo agradeceria, Saludos Erick
Que te parece Erick si envias tu ejemplo a contacto@html5facil.com para checarlo bien y lo que este mal lo arreglo y te explico cual fue tu error, y sobre tu sugerencia te agradezco el punto, muchos ya me han sugerido lo mismo y es muy buena idea, solo que hacer un curso requiere bastante tiempo, pero esta en planes.
Fuera del tema, che, pk no seguis una secuencia de cursos desde cero, como para el ke no sabe nada de html5 como yo, me gustaria aprender bien, un curso online, desde cero, algo donde cuando se termine el curso poder hacer una web en html 5, y si puedes donde compares las etiketas html viejas con estas, gracias.
Hola. Muy buen tutorial. Tengo una duda cuando dices ya casi al final “En Internet Explorer 9 podemos usar el formato WEBM con un Plugin de Google para los que quieran tener soporte de este formato.” Puedes dar mas explicacion y algun ejemplo por favor. Gracias
Claro!, mira IE9 no soporta nativamente el codec o formato Webm de Google pero hay un plugin para instalarlo en tu computadora para que el navegador IE9 soporte la reproducción de este formato para HTML5. El link para descargar el plugin es el siguiente http://tools.google.com/dlpage/webmmf.
Gracias por comentar.
ola. una preguntilla… es totalmente necesario especificar el codec en los sources o se podria poner asi
Gracias y saludos!!
Es muy recomendado especificar los codecs al navegador, ya que estos le dicen que tipo de video va reproducir, ademas al proponerle al navegador muchos tipos de videos en diferentes formatos podría no reproducir ninguno por que no sabe cual codec tiene cada uno, entre mas detallado este el contenido multimedia mejor renderizado tiene el navegador y claro que tambien los buscadores. Pero puedes hacer la prueba aparte, saludos y gracias por comentar.
Hola. Gracias por contestarme. Tengo otra preguntilla. He puesto el codigo de la etiqueta video con un solo source para ver un video en .mp4 y se ve correctamente en Chrome. Pero debajo de mi unico source, he puesto una etiqueta p diciendo que el navegador no soporta el formato .mp4, pero intento ver el video en Opera, como es normal no se me ve el video pero tampoco se me ve el parrafo mostrando la info. ¿Qué he echo mal? Saludos!!
Que tal Frank, para especificar cuando no es compatible en etiqueta de video, ya sea que si no es compatible ponga un reproductor de flash o simplemente un párrafo, deves poner la etiqueta video de apertura y cierre y entre ellas primero el source y después el párrafo o ‘p’.
Gracias por comentar, saludos.
Si, si. Así lo tengo. Abro la etiqueta video cpn la palabra controls y loop (simplemente por probar), luego la etiqueta source con la ruta bien puesta, despues la etiqueta p y el cierre de la etiqueta video. Estar bien, se que esta por que si no en Chrome no me funcionaria (quiero decir que no me he dejado nada por cerrar o sin poner alguna comilla…), pero la etiqueta p no sale en opera ni en mozilla. sin embargo en mi IE8 si sale… que raro…
Ok, para empezar, si tu versión de opera acepta HTML5 es normal, ya que tiene soporte para video pero no aparece el video por que el codec H.264 o mp4 no es compatible, por lo tanto no aparece el párrafo o ‘p’ por que si rendiría el video pero no tiene video por reproducir.
Pues puse todos los sources que has puesto en esta pagina y ni se me reproduce el video (aunque si me sale el recuadro en gris) ni me sale el mensaje de p, ni en Opera 11.11 ni en FireFox 4.0.1. Esto cada vez es mas raro…
Es que Opera y Firefox no soportan mp4 en video, por eso solo sale el cuadro
ola!! gracias por contestar!! por cierto sabeis algo de un atributo de la etiqueta video con el que podamos elegir el volumen con el que se va a empezar a reproducir nuestro video?? he leido en un par de paginas que es volume=”.7″ por ejemplo. pero no fuciona.. ni con el punto ni sin el punto. ¿Que me decis?
Hola que tal, existe un atributo “audio” que su valor por defecto es “mute”, pero en javascript puedes programar controles para el reproductor a base de funciones, para acceder al volumen puedes usar “video.volume”, donde video es la etiqueta y volume la propiedad, o si lo prefieres con el nombre del id de la etiqueta y esta propiedad trabaja del 0 al 1 en porcentaje, donde 1 es el 100%.
Pues existir lo que se dice existir… existe. al parecer lo que pasa es que chrome no lo reconoce y la gente se queja de que con este navegador el video cuando se reproduce esta al maximo (supongo que con el resto pasara lo mismo). prueba a poner en google: problems volume control html5 y veras :). Lo que si que no se es si con otros navegadores si funciona y si la sintaxis es la que te puse en el otro comentario… saludos!!
Buenas, me parece excleente las etiquetas; ahora bien, coloque en mi index un panel de css que rota tiene imagenes y video, lo que pasa es lo mismo a un amigo de aqui, no me reproduce los videos y estan en .mp4; ahora bien, si firefox ni otro navegador lee ese formato, que formato me recomiendan ustedes (claro que no pierda calidad) para subirlo…Gracias espero pronta respuesta…! ah la pagina esta en construccción…
Intenta con Webem (VP8) o OGV que son libres!, firefox ya no tiene soporte para MP4 por eso no lo reproduce, saludos!
Nada no quiera nada…..utilizo estas lineas:
me falta algo, me comi algo….ya toy saturado….me pueden ayudar….!
es te:
!!!…..si me pueden ayudar se lo agradeceria…!
por ahi estube leyendo, que se puede solucionar colocando unas lineas de .htaccess….pero no se en donde colocarlas…! quede en las mismas…
No puedes insertar código HTML aqui, pero envia un e-mail si gustas.
ya te escribi…pero puedes ver mi pagina….es en el index…que me puedes ayudar….www.impulsodigitalccs.com
=((((..lo triste es que si lo puedo ver desde mi maquina, aqui si carga…pero ya lo subi a mi servidor y no se ven…=((((….! SOS
de vuelta yo por estos lares…..sin poder resolver…que royo….a la aplicacion es Piecemaker 2…..
Jamas he utilizado esa aplicación, es muy raro que no te funcione, lo que vi en tu web, es que tienes un flash, si ese XML esta sirviendo Flash para mostrar el código HTML, olvida HTML5 dentro de flash.
No me funciona el loop en firefox, me pueden decir porqué? o Ayudarme!
Cuando dices del Loop ¿A que te refieres?
Buenas, al igual que Jesús, no me funciona el parámetro loop en firefox.
La idea es que un video se ejecute en autoplay y realice un loop infinito (sin dejar de reproducirse).
Muchas gracias por tu ayuda.
El atributo loop (bucle) es otro booleano, hasta ahora esto no se ha implementado en Opera y posiblemente en Firefox tampoco, seria bueno que probaran en diferentes navegadores y ademas usarlo de las 2 maneras posobles.
o
Oye y esto se puede reproducir en smartphones?? o es mejor poner una imagen??
SmartPhones tambien funciona
hola, tengo una terrible duda, estoy usando la etiqueta video, y de manera local me funciona a la perfeccion el problema viene cuando subo mi sitio a la web, estoy subiendo toda la carpeta que contiene el index.html y mis videos un mp4 y un ogv, repito cuando lo hago en mi maquina todo funciona a la percccion el problema es cuando ya está en el server, paraciera como si no lo encontrara, alguien me puede ayudar ya intente pasarle el src de varias formas, solo poniendo el nombre del video.mp4, con toda la url hasta el video, inclusive ya intenté meter mis videos en una carpeta y solo agregué el nombre de la carpeta al src, pero no funcion
Prueba con los permisos de los archivos y el directorio, posiblemente no te deja usarlos.
haz un archivo en bloc de notas copia el contenido que te dan en esta pagina:
http://www.jorgelig.com/2013/04/19/configuracion-web-config-para-soporte-de-html5/
nombra el archivo como web.config y subelo a la carpeta raiz de tu sitio donde esta el index
Hola antes qe naa agradecerte por el taller en el evento Fest Teach People estubo mui bueno, pero bueno pasando a lo siguiente estoi utilizando la etiqueta video como aparece en el ejemplo ii lo unico qe me hace es reproducir el audio pero no se ve el video qe puedo hacer….??
Hola, muchas gracias, primero revisa tu formato de video que sea compatible con el navegador, otra es que veas bien tu código, si gustas, ponlo aquí.
Este es el codigo que utilizo y el video lo tengo en los 3 formatos. Gracias
<video width="629px" height="420px" loop controls tabindex="0">
<source src="carpeta/video.mp4" video/mp4; codecs="avc1.42E01E, mp4a.40.2" />
<source src="carpeta/video.ogv" video/ogg; codecs="theora, vorbis" />
<source src="carpeta/video.webm" video/webm; codecs="vp8, vorbis" />
</video>
El codec de mp4 lo tienes mal, quizas sea eso.
He copiado y pegado el codigo que mencionas arriba y nada.
en la parte de "video/webm" o "video/ogg" te falta ponerle el tag type esto es:
<source src="carpeta/video.ogv" type=video/ogg; codecs="theora, vorbis" />
<source src="carpeta/video.webm" type=video/webm; codecs="vp8, vorbis" />
Esta muy bueno tu post, pero mi duda es, acerca de como puedo agregar unos subtitulos que tengo en formato srt (el formato es lo de menos) en el vídeo, he tratado de averiguar pero la única opción q encuentro en con uso de javascript pero me gustaría saber si hay alguna forma de hacerlo directo con HTML5
me gustas manuel :* 😉
Hola,
como podría evitar que se descargara el video?
Muchas gracias!
Muy buen tutorial se los doy a mis alumnos para que aprendan!
gracias colega
Hola que tal, tengo un problema, se me corta la reproduccion del video luego de 10 minutos. que podria ser? me estoy volviendo loco tratando de averiguar. Gracias por su tiempo!
Puedes probar en otro navegador, también que tu video no tenga errores de conversión. Necesito más detalles de tu error para darte mejor respuesta, saludos.
manuel esta etiqueta se usa asi: me gustas manuel .l.