Atributos comunes con etiqueta audio
- autoplay
- loop
- preload
- controls
- src
- Podemos definir la ruta a un video a través del atributo src
- source
- Podemos definir rutas a distintos videos incluyendo etiquetas source
Dimensiones
La etiqueta video por naturaleza ocupa un espacio determinado, podemos definirlo a través de los atributos ancho y alto:
<video src="vid.mp4" controls width="480" height="270">
</video>
Este código luce así:
Poster
Podemos agregar una imagen que aparecerá en lugar del video hasta que esté sea reproducido. La imagen puede contener un frame del video o alguna gráfica especial:
<video src="vid.mp4" controls width="480" height="270" poster="poster.jpg">
</video>
Este código luce así:
Formatos
Al igual (o peor) que lo que sucede con audio, no todos los navegadores son capaces de decodificar los mismos formatos de video. En consecuencia, debemos dar opciones a éstos a través de la etiqueta source
Navegadores y formatos
- MP4
- Soportado por Internet Explorer 9, Google Chrome y Safari
- Theora Video
- Soportado por Firefox, Chrome y Opera
- WebM
- Soportado por Firefox,Chrome y Opera
Uso de etiqueta source
<video controls width="480" height="270" poster="poster.jpg">
<source src="vid.ogg" type="video/ogg">
<source src="vid.mp4" type="video/mp4">
<source src="vid.webm" type="video/webm">
<</video>
Este código luce así:
Herramientas para transformar videos
Debido a que tenemos que preparar nuestros videos para distintos navegadores, podemos utilizar herramientas diseñadas para hacernos la tarea más fácil:
Ambos programas son gratuitos y disponibles para Mac o Windows.