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.
<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;