Elemento video en HTML

Un elemento html video se utiliza para incrustar contenido visible en documentos y puede contener uno o más archivos de origen que se representan mediante la propiedad src o mediante el elemento <source>. El navegador elegirá el formato más apropiado para ejecutarlo.

Un ejemplo del uso del elemento <video> para agregar un video WebM (a través de la propiedad src) que es alto 360, tiene controles mostrados (a través de la propiedad controls) y tiene una imagen de portada mostrada hasta que comienza a reproducirse (la propiedad poster), y se mostrará un mensaje de texto informando al usuario que su navegador no soporta el elemento <video>:

< video  src = "video-1.webm"  controls  poster = "imagen-video.webp"  height = "400" > 
  Su navegador no es compatible con el elemento < code > video </ code > .
</ video >

Este es un ejemplo del uso del elemento <video> para agregar un video en formato WebM (a través de la función src) con controles (a través de la función controls) y comienza a reproducirse automáticamente (la función autoplay):

< video  src = "video-1.webm"  controla la  altura de reproducción automática  = "400" > < track kind = "captions" >
  Su navegador no es compatible con el elemento < code > video  </ code > .
</ video >

En cuanto a este ejemplo, proporciona dos fuentes diferentes para el clip, lo que permite que se reproduzca en el navegador, independientemente del códice que admita el navegador. El navegador probará el formato WebM y, si no puede reproducirlo, intentará reproducir MP4.

Tenga en cuenta el uso de la propiedad height para especificar la altura del video (en píxeles), la propiedad controls para agregar controles al clip y la propiedad poster para agregar una superposición.

< video  controles  poster = "imagen-video.webp"  height = "400" > 
  < source  src = "video-1.webm"  type = "video / webm" > 
  < source  src = "video-1.mp4"  type = "video / mp4 " > 
  Su navegador no es compatible con el elemento < code > video </ code > .
</ video >

Etiqueta html video

Clasificaciones de contenido	Un elemento organizativo, un elemento normal, un elemento que contiene medios incrustados o un elemento interactivo.
Contenido permitido	Si un elemento tiene la propiedad `src`, puede contener `<track>` uno o más elementos seguidos de contenido regular que no incluye los dos elementos `<audio>` y `<video>`. Si no tiene la propiedad, `src` puede contener `<source>` uno o más elementos, seguidos de `<track>` uno o más elementos, y contenido normal que no incluya el elemento `<audio>` y `<video>`.
Acrónimo	Las etiquetas de inicio o finalización no se pueden omitir.
Elementos del padre	Cualquier elemento que acepte elementos incrustados.
Interfaz DOMO	`HTMLVideoElement`

Características

En este elemento html video se pueden utilizar propiedades globales. El elemento <video> puede contener una URL a uno o más videos, se puede usar la propiedad src o el elemento <source> y el navegador elegirá el clip más apropiado para reproducir.

`autoplay`

Esta función es booleana y si se usa (¡incluso si es un valor "false"!), El vídeo comenzará a reproducirse lo más rápido posible, sin esperar a que se descargue todo el archivo.

Tenga en cuenta que los sitios que reproducen audio automáticamente (o reproducen videos con audio) pueden molestar a los usuarios, por lo que esta función debe evitarse a menos que sea necesario y, si es absolutamente necesario, haga que esta función sea opcional y solicite al usuario que la habilite. Pero puede beneficiarse de esta función si el propósito principal de la página es reproducir un video específico.

`buffered`

Una propiedad elegible para especificar qué campos se descargaron del segmento, ya que esta propiedad contiene un objeto TimeRanges.

`controls`

Si esta función está presente, el navegador proporcionará controles para permitir al usuario controlar la reproducción de vídeo, incluido el volumen, moverse a diferentes posiciones en el clip, pausar, reproducir …

`height`

Altura del área de visualización de video en píxeles sólo se permiten valores absolutos, no se pueden usar valores relativos.

`width`

Ancho del área de visualización de video en píxeles sólo se permiten valores absolutos, no se pueden usar valores relativos.

`loop`

Esta propiedad es booleana y, si está presente, el clip se reproducirá desde el principio después de llegar al final.

`muted`

Booleano, esta propiedad indica si el clip se amortiguó inicialmente. El valor predeterminado es false.

`played`

Esta propiedad es legible y contiene un objeto TimeRanges que indica qué dominios ha lanzado el usuario desde la sección.

`preload`

El propósito de esta función es darle al navegador una idea de lo que el desarrollador de la página piensa que es mejor para la experiencia del usuario y toma uno de los siguientes valores:

none: El clip no debe estar precargado.
metadata: Solo se deben cargar metadatos (por ejemplo, duración del clip).
auto: Indica que el clip se puede cargar incluso si no se espera que el usuario lo reproduzca.
Si el valor es una cadena vacía, entonces es equivalente al valor auto.

Si no se establece el valor de esta propiedad, el valor predeterminado se tomará del navegador (cada navegador tiene su propio valor predeterminado), pero la especificación recomienda que los navegadores tengan el valor predeterminado de metadata.

Tenga en cuenta que la propiedad autoplay tiene prioridad sobre la propiedad preload, por lo que si autoplay se especifica la propiedad, tiene sentido que el navegador comience a descargar el clip de inmediato.

Cabe señalar que la especificación no obliga al navegador a seguir el valor de esta propiedad, es solo una pista de lo que quiere el desarrollador de la página.

`poster`

Una URL que apunta a una portada del video que aparecerá hasta que el usuario comience a reproducir el video. Si no se establece esta propiedad, no se mostrará nada hasta que esté disponible el primer fotograma de vídeo y, a continuación, el primer fotograma se procesará como una superposición de vídeo.

`src`

Esta propiedad contiene la URL del archivo de video que se cargará. Esta propiedad es opcional y puede usar el elemento <source> dentro del elemento <video> para especificar la URL de los clips que desea incluir.

Soporte del servidor

Si el tipo MIME del tipo de video que está utilizando no está configurado correctamente, es posible que el video no aparezca o se muestre un rectángulo plateado con una X (si JavaScript está habilitado).

Si está utilizando un servidor Apache para servir videos Ogg, puede resolver este problema agregando la extensión del archivo de video al tipo MIME nombrado "video/ogg". Las extensiones de archivo de video Ogg más populares son "‎.ogm", "‎.ogv"y "‎.ogg".

Para hacerlo , modifique un archivo mime.types en una carpeta /etc/apache o use la instrucción de configuración AddType en el archivo httpd.conf:

AddType video / ogg .ogm
 AddType video / ogg .ogv
 AddType video / ogg .ogg

Si la fórmula que tiene los archivos de video es el WebM, puede resolver este problema en el servidor de Apache agregando la extensión que usan los videos que tiene (la extensión de meses es "‎.webm") a MIME ingrese el nombre del "video/webm"archivo mime.types en una carpeta , o/etc/apache use la instrucción de configuración AddType en el archivo httpd.conf:

AddType video / webm .webm

Su proveedor de alojamiento puede proporcionar una interfaz sencilla para modificar la configuración de los tipos MIME.

Soporte de navegadores

Chrome	Firefox	Edge	Safari	Ópera
Soportado	Soportado	Soportado	Soportado	Soportado

Algunas funciones HTML5 recién agregadas no funcionan en todos los navegadores.