HTML5. La etiqueta video

Abr 24, 2014 | TIC-tek

Hasta ahora, no existía un estándar para visualizar una película de vídeo en una página web. Hoy, la mayoría de vídeos se muestran a través de un plug-in del estilo de flash.

HTML5 define un nuevo elemento que especifica una forma estándar para incrustar una vídeo o película en una página web: <video>.

Los navegadores que soportan este elemento a día de hoy son Internet Explorer 9, Firefox, Opera, Chrome, y Safari.

Por ejemplo:

<!DOCTYPE html>

<html>

<body>

<video width="320" height="240" controls="controls">

  <source src="peli.mp4" type="video/mp4" />

  <source src="peli.ogg" type="video/ogg" />

  Tu navegador no soporta vídeos

</video>

</body>

</html>

Los formatos soportados actualmente por todos los navegadores son los siguientes:

Navegador MP4 WebM Ogg
Internet Explorer 9 SI NO NO
Firefox 4.0 NO SI SI
Google Chrome 6 SI SI SI
Apple Safari 5 SI NO NO
Opera 10.6 NO SI SI

 

La descripción de cada uno de los formatos es la siguiente:

  • MP4 = MPEG 4 dispone de codec de vídoe H264 y de codec de audio AAC
  • WebM = WebM codec de vídeo VP8 y codec de audio Vorbis
  • Ogg = Ogg code de vídeo Theora y codec Vorbis para el áudio

Un codec es un algoritmo por el cual se codifica una secuencia de vídeo. Cuando se usa en un entorno web se aplica una compresión con pérdida. Los tres principales utilizados hoy en día son:

  • H.264: es un estándar del año 2003 y su su objetivo es proporcionar un único códec para dispositivos con bajo ancho de banda, poca CPU (móviles) y también para dispositivos con alto ancho de banda.
  • Theora es un codec gratuito que aparece en 2008 y fue adoptado por Firefox. Usa un contenedor OGG sin necesidad de un plugin específico
  • Es otro codec de uso libre

Las etiquetas asociadas a los vídeos son las siguientes:


Tag Descripción
<video> Define un vídeo
<source> Recursos de un vídeo o audio
<track> Pistas de un medio

 

Etiqueta video

Permite indicar el vídeo que se va a utilizar.

<video src=”video.mp4″></video>

Dispone de los siguientes atributos que podemos utilizar.

Atributo Valor Descripción
autoplay autoplay Especifica que el vídeo se ejecute en cuanto se carge.
controls controls Visualiza una botonera con los controles de ¡l vídeo
height pixels Altura del vídeo
loop loop Indica que el vídeo se ejecute una y otra vez
muted muted Silencia el vídeo
poster URL Indica una imagen a visualizar mientras se descarga el vídeo
preload auto
metadata
none
Indica si el vídeo empieza a cargar al abrir la página
src URL URL de acceso al vídeo
widthNew pixels Anchura del vídeo

 

Aquí tenemos algunos ejemplos:

Indica las dimensiones del vídeo

<video src="video.mp4" width="320” height="260"></video>

Indica que el vídeo aparezca con controles

<video src="video.mp4" width="320” height="260" controls></video>

El fichero se precarga sin preguntar

<video src="video.mp4" width="320” height="260" preload></video>

Indica que se ejecute de forma automática

<video src=”video.mp4″ width=”320” height=”260″ autoplay></video>

Etiqueta source

La etiqueta <source>se usa para especificar múltiples elementos multimedia como <video>y <audio>.

Permite especificar archivos de video/audio alternativos que puede elegir el navegador, basado en el tipo o códec que soporta.

<video controls=”controls”>
<source src=”peli1.ogg” type=”audio/ogg” />
<source src=”peli1.mp4″ type=”audio/mpeg” />
Nos e soporta vídeo</video>

Incorpora los siguientes atributos:

Atributo Valor Descripción
media media_query Tipo de fichero multimedia
src URL URL de acceso al fichero
type MIME_type Tipo MIME

 

Etiqueta track

La etiqueta <track>especifica determinadas características para las pistas de texto de elementos multimedia como los vídeos o audios.

Este elemento se utiliza para especificar cosas como los subtítulos, títulos u otros archivos que contienen texto, que debería aparece de forma visible al ejecutar ficheros de tipo multimedia.

Contiene los siguientes atributos:

Atributo Valor Descripción
default default Indica que el track es el de por defecto y debe estar activado en las preferencias del usuario
kind captions
chapters
descriptions
metadata
subtitles
Tipo de track
label text Título
src URL URL del fichero de track
srclang language_code Lenguaje del track, obligatorio si indicamos subtítulos

 

<video width="320" height="240" controls="controls">
   <source src="starship.mp4" type="video/mp4" />
   <source src="starship.ogg" type="video/ogg" />
   <track src="subtitles_es.txt" kind="subtitles" srclang="es"
   label="Spanish">
 </video>

 

Acceso mediante DOM

El elemento <video> también dispone de métodos, propiedades y eventos que permiten personalizar mucho mejor nuestra página Web. Hay métodos para reproducir, pausar, etc.

Disponemos de una serie de propiedades, como la duración o el volumen a las que se puede acceder y por supuesto cambiar

Por último, disponemos de eventos de control y de monitorización de la reproducción del elemento multimeddia.

Métodos

 

Métodos Descripción
play() Reproducir el archivo
pause() Pausar archivo
load() Cargar archivo
canPlayType Preguntar al navegador si puede ejecutarse el vídeo

Por ejemplo, para el elemento “video1″

<video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4" />
    <source src="mov_bbb.ogg" type="video/ogg" />
    No soporta vídeo
  </video>

Podemos incluir un JavaScript con el siguiente código:

<script>
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
  myVideo.play();
else
  myVideo.pause();}
</script>

Las propiedades y eventos asociados son los siguientes:

Propiedades Eventos
currentSrc play
currentTime pause
videoWidth progress
videoHeight error
duration timeupdate
ended ended
error abort
paused empty
muted emptied
seeking waiting
volume loadedmetadata
height
width

Por ejemplo, para cambiar una propiedad de anchura en un JavaScript

 myVideo.width=420;

Catálogo 2023

Conoce nuestra oferta formativa para este año

Últimas entradas