Elemento video

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento video incrusta recursos de video en un documento. Aunque es muy fácil de utilizar, este elemento puede ser muy adaptable, poderoso y compatible con la mayoría de los navegadores.

Los autores tienen dos formas para indicarle a los navegadores qué recurso se debe cargar. El primero, y más directo, es especificando el URI del recurso en el atributo src. El segundo método incrementa la compatibilidad entre navegadores, al trabajar junto al elemento source. Con el elemento source se pueden proveer diferentes alternativas del mismo recurso, y dejar que el navegador elija la que se adapta mejor a sus características.

Indistintamente de la forma que se elija para incluir la fuente del video, siempre se podrá llenar al elemento con contenido alternativo, de modo que los navegadores que no lo soporten tengan algo que mostrar. Esto resulta muy útil para autores que necesiten desarrollen sitios compatibles con navegadores antiguos, ya que pueden proveer alternativas en reproductores de video Flash o un mensaje que informe al usuario acerca del problema de soporte (y posibles formas de resolverlo). Si el navegador soporta al elemento video, el contenido alternativo será simplemente desestimado.

Uno o más elementos track pueden incluirse dentro de cualquier elemento de medios para proveer información extra, como subtítulos, títulos o descripciones, que mejorarán la experiencia del usuario.

Los autores deben elegir una de las dos formas de especificar un recurso de video pero nunca ambas. Si declaras el atributo src no te será posible proveer alternativas con el elemento source.

Ejemplos

En el siguiente ejemplo insertaremos un video usando el atributo src, mientras indicamos al navegador que provea controles para que el usuario maneje su reproducción. Para hacer que los controles estén disponibles, estableceremos el atributo booleano controls.

También proveeremos contenido alternativo para que los usuarios con navegadores que no soportan al elemento video sean informados acerca del problema y tengan una pequeña guía acerca de cómo proceder. Asimismo, especificaremos el tamaño del video con los atributos width y height.

<video src="../../../videos/A_Flight_To_Mars.ogg" width="384" height="288" controls>
  <p>Tu navegador no soporta la reproducción nativa de video o no tiene los códecs Ogg requeridos. Tal vez quieras pasarte a un navegador moderno con más características, con el fin de poder ver el archivo de video.</p>
</video>

Eso pudo haber funcionado correctamente, pero el problema con el código anterior es que solo provee una fuente, y dado que su formato es Ogg, no será reproducido en todos los navegadores. Entonces, quitemos el atributo src y pongamos algunos elementos source, cada uno con un versión del video en un formato particular, para permitirle a los navegadores elegir la versión que son capaces de reproducir.

Para los navegadores que soportan al elemento video, no hace falta proveer más que dos formatos (MP4 y Ogg) para hacer que el video sea reproducido correctamente en todos los navegadores. Sin embargo, pondremos a disponibilidad una tercera versión, WebM, por ser la mejor candidata a convertirse en el estándar para web en el futuro cercano.

Para mejorar la compatibilidad aún más, pondremos a la versión en MP4 primero, para evitar un error particular en los navegadores de iPad.

<video width="384" height="288" controls>
  <source src="../../../videos/A_Flight_To_Mars.mp4" type="video/mp4">
  <source src="../../../videos/A_Flight_To_Mars.webm" type="video/webm">
  <source src="../../../videos/A_Flight_To_Mars.ogg" type="video/ogg">
</video>

Finalmente, intentaremos agregar títulos y subtítulos a un video con la ayuda de track. El elemento track ha sido diseñado para proveer subtítulos, títulos, descripciones, capítulos o metadatos para video y audio, pero al ser relativamente nuevo, no es completamente soportado por los navegadores.

Nota que los títulos y subtítulos vienen en un formato especial de archivo, que en este caso es WebVTT, aunque existen otros.

El soporte provisto por los nagegadores para pistas es incompleto. Los autores pueden tener que recurrir a programas del lado cliente para proveer esta funcionalidad consistentemente hasta que el soporte crezca.

<video width="384" height="288" controls>
  <source src="../../../videos/Cyrano_de_Beryerac.mp4" type="video/mp4">
  <source src="../../../videos/Cyrano_de_Beryerac.webm" type="video/webm">
  <source src="../../../videos/Cyrano_de_Beryerac.ogg" type="video/ogg">
  <track kind="captions" label="Captions" src="../../../videos/Cyrano_de_Beryerac_EN.vtt" srclang="en"></track>
  <track kind="subtitles" label="Subtítulos en español" src="../../../videos/Cyrano_de_Beryerac_ES.vtt" srclang="es"></track>
</video>

El elemento video tiene algunos atributos interesantes. Tal vez quieras revisar la siguiente sección.

Atributos

Atributos específicos

src

El URI (ubicación) del recurso de medios que será reproducido.

Los autores no deberían incluir a source dentro del elemento si el atributo src está presente. Ambos métodos para declarar fuentes no están pensados para trabajar en conjunto.

Este atributo es obligatorio si el atributo itemprop está presente en el elemento video, ya que se utiliza para determinar el valor de la propiedad.

Téngase en cuenta que usar el atributo src permite la declaración de un solo recurso de medios. Si la compatibilidad con los distintos navegadores es requerida, los autores deberían usar el elemento source en su lugar, y definir al menos los dos formatos más soportados (MP4 y Ogg).

Ejemplo

<video src="../../../videos/Old_cartoon.ogg" width="384" height="288" controls></video>

crossorigin

Un valor enumerado que indica si la petición hecha a un servidor externo debe presentar credenciales CORS o no. Este atributo resulta útil al incrustar videos ubicadas en otros servidores que soportan acceso cross-origin, para permitir su reutilización en un canvas. Los dos valores posibles son (insensibles a mayúsculas/minúsculas):

  • anonymous: las peticiones CORS para el elemento tendrán la etiqueta "omit credentials" establecida.
  • use-credentials: las peticiones CORS para el elemento no tendrán la etiqueta "omit credentials" establecida.

Ejemplo

<video src="Automation.ogg" width="640" height="480" crossorigin="anonymous"></video>

poster

La dirección (URI) de una imagen que el navegador puede mostrar en el espacio de este elemento mientras no se encuentre a disponibilidad la información del video.

La imagen declarada en este atributo debería ser representativa del elemento y dar al usuario una pista de lo que verá cuando el medio sea reproducido.

Ejemplo

<video poster="../../../images/Laurel_and_Hardy.jpg" width="384" height="288" controls>
  <source src="../../../videos/Laurel_and_Hardy.mp4" type="video/mp4">
  <source src="../../../videos/Laurel_and_Hardy.webm" type="video/webm">
  <source src="../../../videos/Laurel_and_Hardy.ogg" type="video/ogg">
</video>

playsinline

Un valor booleano que sugiere al navegador mostrar el video dentro del área de reproducción del elemento de manera predeterminada, en lugar de mostrarlo a pantalla completa o en una ventana reescalable independiente.

La mayoría de los navegadores muestran de por sí los videos dentro del área de reproducción del elemento de manera predeterminada. La ausencia de este atributo puedo no tener ningún efecto en tales situaciones.

Ejemplo

<video src="tsunami.ogg" width="640" height="480" playsinline></video>

preload

Una pista para el navegador que lo ayudará a decidir si el recurso de medios debería ser cargado ni bien sea posible (cuando se cargue el documento). El atributo puede definir tres estados que aconsejan al navegador llevar a cabo las siguientes tareas:

  • none: no se requiere la precarga de ninguna información ya que al usuario y/o servidor les gustaría minimizar el tráfico innecesario.
  • metadata: sólo los metadatos del recurso (duración, dimensiones, pistas, etc.) y probablemente los primeros pocos fotogramas, pueden considerarse necesarios para el usuario.
  • auto: el recurso de medios completo puede ser precargado a discresión del navegador.

Cuando el atributo toma la cadena vacía ("") por valor, o cuando está simplemente presente, el navegador se comporta como si el valor "auto" fuese pasado.

El valor en este atributo da solamente una pista al navegador acerca de cómo manejar la precarga del recurso de medios. La conducta elegida por éste no se encuentra regida por el estándar, y por lo tanto, puede ser impredecible.

Ejemplo

<video width="384" height="288" controls preload>
  <source src="../../../videos/Illusion.mp4" type="video/mp4">
  <source src="../../../videos/Illusion.webm" type="video/webm">
  <source src="../../../videos/Illusion.ogg" type="video/ogg">
</video>

autoplay

Un valor booleano que indica si la reproducción del medio debería comenzar tan pronto como al navegador le sea posible sin tener que detenerse para cargar. Si el atributo toma el valor "autoplay" o la cadena vacía (""), o si simplemente está presente (sin valor) la reproducción comienza automáticamente.

Ejemplo

<video src="The_wound.mp4" width="640" height="480" autoplay></video>

loop

Un valor booleano que indica si el navegador debería recomenzar automáticamente la reproducción del archivo de medios una vez que ésta llega a su fin. Si el atributo toma el valor "loop" o la cadena vacía (""), o si simplemente está presente (sin valor) la reproducción se repetirá indefinidamente.

Ejemplo

<video width="384" height="288" controls loop>
  <source src="../../../videos/Illusion.mp4" type="video/mp4">
  <source src="../../../videos/Illusion.webm" type="video/webm">
  <source src="../../../videos/Illusion.ogg" type="video/ogg">
</video>

muted

Un valor booleano que indica si el elemento de medios debería ser silenciado (un estado equivalente a no tener volumen). Si el atributo toma el valor "muted" o la cadena vacía (""), o si simplemente está presente (sin valor) la salida de sonido del elemento será silenciada.

Si los controles están presentes, los navegadores proveerán usualmente un botón para silenciar/permitir el sonido del elemento. Este botón debería estar presente aún cuando este atributo no se encuentre establecido.

Ejemplo

<video width="384" height="288" controls muted>
  <source src="../../../videos/Old_cartoon.mp4" type="video/mp4">
  <source src="../../../videos/Old_cartoon.webm" type="video/webm">
  <source src="../../../videos/Old_cartoon.ogg" type="video/ogg">
</video>

controls

Un valor booleano que indica al navegador que debería proveer una interfaz para permitir al usuario controlar la reproducción, típicamente cuando el autor no provee un programa controlador de la reproducción. Si el atributo toma el valor "controls" o la cadena vacía (""), o si simplemente está presente (sin valor) se proveerán controles de reproducción.

Ejemplo

<video width="384" height="288" controls>
  <source src="../../../videos/Charlie_Chaplin_The_tramp.mp4" type="video/mp4">
  <source src="../../../videos/Charlie_Chaplin_The_tramp.webm" type="video/webm">
  <source src="../../../videos/Charlie_Chaplin_The_tramp.ogg" type="video/ogg">
</video>

width

Un número de píxeles que indica el ancho que el video tendrá cuando sea incrustado en el documento.

No es necesario proveer el ancho real del video en este atributo. Sin embargo, especificar un ancho diferente puede producir imágenes pixeladas (cuando es mayor) o tiempos de carga más extensos de lo necesario (cuando es menor).

Ejemplo

<video src="Final.ogg" width="800" height="600"></video>

height

Un número de píxeles que indica la altura que el video tendrá cuando sea incrustado en el documento.

No es necesario proveer la altura real del video en este atributo. Sin embargo, especificar un ancho diferente puede producir imágenes pixeladas (cuando es mayor) o tiempos de carga más extensos de lo necesario (cuando es menor).

Ejemplo

<video src="Setup.ogg" width="640" height="480"></video>

meadiagroup

Una cadena que enlazará a este elemento de medios con todos los elementos de medios que tengan el mismo valor en sus atributos meadiagroup. Todos los elementos de medios agrupados compartirán la misma posición y propiedades de reproducción y, por lo tanto, serán reproducidos juntos como si fueran uno.

Los autores pueden tomar ventaja de este atributo para, por ejemplo, proveer un video con un audio separado que contenga múltiples fuentes, una para cada lenguaje soportado. Otra posibilidad, mostrada en el siguiente ejemplo, es proveer dos o más vistas de un mismo evento, siendo éstas diferentes en formato, versión, punto de vista (cámara), etc.

Aunque es posible, no hace falta proveer controles para más de un elemento de medios en un grupo. Los comandos ejecutados en un control afectarán a todos los elementos en el grupo indistintamente.

Este atributo ha sido recientemente introducido al estándar y, debido a la falta de implementación por parte de los navegadores, eliminado. Su uso es actualmente inválido.

Ejemplo

<p>Aquí podrás comparar las dos versiones (a color y en blanco y negro) de la película "Un viaje a la luna", dirigida por Georges Méliès.</p>
<video width="384" height="288" mediagroup="trip_to_the_moon" controls>
  <source src="../../../videos/A_trip_to_the_moon.mp4" type="video/mp4">
  <source src="../../../videos/A_trip_to_the_moon.webm" type="video/webm">
  <source src="../../../videos/A_trip_to_the_moon.ogg" type="video/ogg">
</video>
<video width="384" height="288" mediagroup="trip_to_the_moon">
  <source src="../../../videos/A_trip_to_the_moon_colored.mp4" type="video/mp4">
  <source src="../../../videos/A_trip_to_the_moon_colored.webm" type="video/webm">
  <source src="../../../videos/A_trip_to_the_moon_colored.ogg" type="video/ogg">
</video>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.