El nuevo elemento video HTML5 es compatible con la reproducción nativa de archivos de vídeo en el navegador sin necesidad de plug-ins ni reproductores. El elemento video comienza con la etiqueta <video> y termina con la etiqueta </video>.

Elemento <video>

En siguiente Tabla se enumeran los atributos del elemento video:

Atributos del elemento Video
AtributoValorUso
srcNombre de ArchivoOpcional; nombre del archivo de vídeo.
typeTipo MIMEOpcional; el tipo MIME del archivo de vídeo, como video/mp4 o video/ogg
autoplayautoplayOpcional; indica si el vídeo debe comenzar a reproducirse automáticamente; utilícelo con precaución.
controlscontrolsOpcional; indica si se deben visualizar los controles; aconsejable.
heightNúmeroOpcional; altura del vídeo en píxeles.
looploopOpcional; indica si el vídeo debe reproducirse una y otra vez.
posterNombre del archivoOpcional; especifica una imagen para mostrar si el navegador no puede reproducir el vídeo.
preloadnone, metadata, autoOpcional; valores: none (sin precarga), metadata (sólo descargar metadatos de archivos multimedia) y auto (descargar el archivo multimedia).
titleDescripción de textoOpcional; especifica una breve descripción de texto que pueden mostrar los navegadores o las tecnologías de asistencia.
widthNúmeroOpcional; ancho de vídeo en píxeles.

Tendrás  que proporcionar varias versiones del archivo de vídeo debido a la compatibilidad del navegador con diferentes códecs. Planifica el acceso de archivos de vídeo en al menos dos contenedores diferentes, incluyendo MP4 y OGG (u OGV). Es típico omitir los atributos src y type de la etiqueta video y, en su lugar, configurar múltiples versiones del archivo de video con el elemento source.

Elemento source

Recuerda la sección anterior del elemento audio, donde el elemento source es una etiqueta autocontenida, o nula, que especifica un archivo multimedia y un tipo MIME. El atributo src identifica el nombre de archivo del archivo multimedia. El atributo type indica el tipo MIME del archivo. Codifica type="video/mp4" para archivos de vídeo utilizando el códec MP4. Codifica type="video/ogg" para archivos de vídeo utilizando el codec Theora. Configura un elemento source para cada versión del archivo de vídeo. Coloca los elementos source antes de la etiqueta de cierre de video.

Vídeo HTML5 en una página web

El siguiente código configura una página web con los controles nativos del navegador HTML5 para mostrar y reproducir un vídeo:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Ejemplo del elemento Video</title>
  </head>
  <body>
    <h1>Elemento Video</h1>
    
      <video id='video' controls="controls" preload='none'
        width="600" poster="http://media.w3.org/2010/05/sintel/poster.png">
        <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'/>
        <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
        <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'/>
        <a href="http://media.w3.org/2010/05/sintel/trailer.ogv">Trailer</a>
      </video>
 
  </body>
</html> 

Las versiones actuales de Safari, Chrome, Firefox, Microsoft Edge y Opera soportan el elemento video HTML5. Internet Explorer 9 es compatible con el elemento video, pero las versiones anteriores no lo son. Los controles que muestra cada navegador son diferentes.

Revisa el código anterior y observa el elemento anchor situado entre el segundo elemento source y la etiqueta video de cierre. Cualquier elemento HTML o texto que se encuentra en esta área es renderizado por navegadores que no soportan elemento HTML5 de video. Esto se conoce como contenido alternativo. En este caso, un hipervínculo al  archivo (.mov) se proporciona para que el usuario lo descargue.

Etiqueta VIDEO
5 (100%) 10 votos




Alex Walton

Alex Walton

Aprender desde Cero es tu web para conocer todo sobre informática. Mi nombre es Alex y me gustaría que dejes tu comentario ante cualquier duda o aporte.
"Si no lo consigues a la primera, llámalo versión 1.0"

Comparte este artículo:

Facebook
Google+
Twitter
LinkedIn
WhatsApp
Email
Deja tu comentario
Contenido Relacionado
Etiqueta AUDIO HTML5 con ejemplo

Etiqueta AUDIO

El nuevo elemento audio de HTML5 soporta la reproducción nativa de archivos de audio en el navegador sin la necesidad ...
Leer Más
Etiqueta EMBED HTML5 con ejemplos

Etiqueta EMBED

El elemento embed es un elemento autónomo, o vacío (no se utiliza etiqueta de cierre), cuyo propósito es proporcionar un ...
Leer Más
Etiqueta FORM Ejemplo Formularios HTML

Etiqueta FORM

Cada vez que utilizas un motor de búsqueda, realiza un pedido o te unes a una lista de correo electrónico, ...
Leer Más
SOBRE NOSOTROS

Somos una web que busca el libre conocimiento en temas relacionados a la informática.

Todos los cursos son gratis. La publicidad nos mantiene activos así que por favor visita a nuestros anunciantes.

RECIBE MUCHOS REGALOS