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:

NavegadorMP4WebMOgg
Internet Explorer 9SINONO
Firefox 4.0NOSISI
Google Chrome 6SISISI
Apple Safari 5SINONO
Opera 10.6NOSISI

 

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:

TagDescripció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.

AtributoValorDescripción
autoplayautoplayEspecifica que el vídeo se ejecute en cuanto se carge.
controlscontrolsVisualiza una botonera con los controles de ¡l vídeo
heightpixelsAltura del vídeo
looploopIndica que el vídeo se ejecute una y otra vez
mutedmutedSilencia el vídeo
posterURLIndica una imagen a visualizar mientras se descarga el vídeo
preloadauto
metadata
none
Indica si el vídeo empieza a cargar al abrir la página
srcURLURL de acceso al vídeo
widthNewpixelsAnchura 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:

AtributoValorDescripción
mediamedia_queryTipo de fichero multimedia
srcURLURL de acceso al fichero
typeMIME_typeTipo 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:

AtributoValorDescripción
defaultdefaultIndica que el track es el de por defecto y debe estar activado en las preferencias del usuario
kindcaptions
chapters
descriptions
metadata
subtitles
Tipo de track
labeltextTítulo
srcURLURL del fichero de track
srclanglanguage_codeLenguaje 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étodosDescripción
play()Reproducir el archivo
pause()Pausar archivo
load()Cargar archivo
canPlayTypePreguntar 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:

PropiedadesEventos
currentSrcplay
currentTimepause
videoWidthprogress
videoHeighterror
durationtimeupdate
endedended
errorabort
pausedempty
mutedemptied
seekingwaiting
volumeloadedmetadata
height
width

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

 myVideo.width=420;

Catálogo 2024

Conoce nuestra oferta formativa para este año

Catálogo IA

Descarga nuestro catálogo específico de Inteligencia Artificial

Últimas entradas