VIDEO Y

AUDIO

REPRODUCIENDO
VIDEO CON HTML5
HTML ya dispone de soporte nativo para videos e incluso un
estndar que nos permitir crear aplicaciones de
procesamiento de video compatibles con mltiples
navegadores.
HTML5 finalmente introdujo un elemento para insertar y
reproducir video en un documento HTML. El elemento
<video> usa etiquetas de apertura y cierre y solo unos pocos
parmetros para lograr su funcin.

SINTAXIS BSICA PARA EL ELEMENTO <V IDE O>.

NO HAY UN FORMATO ESTNDAR PARA TODOS

LOS NAVEGADORES
Buscadores

Ogg

Firefox 4.0 *

Firefox 3.5 3.6

Safari 3 *

MP4

Chrome 6 *

Chrome 3 - 5

Opera 10.6 *

Opera 10.5

IE 9 +

WebM

x
x

EL ELEMENTO <VIDEO>
Este elemento ofrece varios atributos para establecer su
comportamiento y configuracin. Los atributos width y
height, al igual que en otros elementos HTML ya conocidos,
declaran las dimensiones para el elemento o ventana del
reproductor.
El atributo src especifica la fuente del video. Este atributo
puede ser reemplazado por el elemento <source> y su
propio atributo src para declarar varias fuentes con
diferentes formatos

ATRIBUTOS PARA <VIDEO>

Junto con controls, tambin podemos usar los siguientes:
Autoplay: el navegador comenzar a reproducir el video
automticamente tan pronto como pueda.
Loop: el navegador comenzar a reproducir el video nuevamente
cuando llega al final.
Poster: Este atributo es utilizado para proveer una imagen que ser
mostrada mientras esperamos que el video comience a ser
reproducido.
preload: Este atributo puede recibir tres valores distintos: none,
metadata o auto. El primero indica que el video no debera ser
cacheado, por lo general con el propsito de minimizar trfico
innecesario. El segundo valor, metadata, recomendar al navegador
que trate de capturar informacin acerca de la fuente (por ejemplo,
dimensiones, duracin, primer cuadro, etc). El tercer valor, auto,
es el valor configurado por defecto que le sugerir al navegador
descargar el archivo tan pronto como sea posible.

PROGRAMANDO UN
REPRODUCTOR DE VIDEO
Cada navegador tiene sus propios botones y barras de
progreso, e incluso sus propias funciones.
HTML5 proporciona nuevos eventos, propiedades y mtodos
para manipular video e ntegrarlo al documento.
Podremos crear nuestro propio reproductor de video y
ofrecer las funciones que queremos usando HTML, CSS y
Javascript. El video es ahora parte integral del documento.

EL DISEO
Todo reproductor de video necesita un panel de control con
al menos algunas funciones bsicas.Un elemento <nav> fue
agregado luego de <video>. Este elemento <nav> contiene
dos elementos <div> (botones y barra) para ofrecer un botn
Reproducir y una barra de progreso.

EL CDIGO
Explicaremos cmo aplicar los necesarios eventos, mtodos
y propiedades para procesamiento bsico de video.
Algunas pocas funciones simples que nos permitirn
reproducir y pausar el video, mostrar una barra de progreso
mientras el video es reproducido y ofrecer la opcin de hacer
clic sobre esta barra para adelantar o retroceder el video.

REPRODUCIENDO
AUDIO CON HTML5
HTML5 provee un nuevo elemento para reproducir audio en
un documento HTML. El
elemento, por supuesto, es <audio> y comparte casi las
mismas caractersticas del
elemento <video>.

EL ELEMENTO <AUDIO>

ELEMENTOS

HTML5 provee dos nuevos elementos HTML para

procesar medios y una API especfica para acceder
a la librera de medios. <video> Este elemento nos
permite insertar un archivo de video en un
documento HTML. <audio> Este elemento nos
permite insertar un archivo de audio en un
documento HTML.

ATRIBUTOS
controls Este atributo, si est presente, activa los controles por
defecto. Cada navegador provee sus propias funciones, como
botones para reproducir y pausar el medio, as como barra de
progreso, entre otras.
autoplay Este atributo, si est presente, le indicar al navegador
que comience a reproducir el medio lo ms pronto posible.
loop Este atributo har que el navegador reproduzca el medio
indefinidamente.
preload Este atributo recomienda al navegador qu hacer con el
medio. Puede recibir tres valores diferentes: none, metadata y
auto. El valor none le dice al navegador que no descargue el
archivo hasta que el usuario lo ordene. El valor metadata le
recomienda al navegador descargar informacin bsica sobre el
medio. El valor auto le dice al navegador que comience a
descargar el archivo tan pronto como sea posible.

ATRIBUTOS DE VIDEO

Existen algunos atributos que son especficos

para el elemento <video>: poster Este atributo
provee una imagen para mostrarla en lugar del
video antes de ser reproducido.
width Este atributo determina el tamao del video
en pixeles.
height Este atributo determina el tamao del video
en pixeles.

ATRIBUTOS DE VIDEO

Existen algunos atributos que son especficos

para el elemento <video>: poster Este atributo
provee una imagen para mostrarla en lugar del
video antes de ser reproducido.
width Este atributo determina el tamao del video
en pixeles.
height Este atributo determina el tamao del video
en pixeles.

EVENTOS
Los eventos ms relevantes para esta API son:
progress Este evento es disparado peridicamente para informar el
progreso en la descarga del medio.
canplaythrough Este evento es disparado cuando el medio completo
puede ser reproducido sin interrupcin.
canplay Este evento es disparado cuando el medio puede ser reproducido.
A diferencia del evento previo, ste es disparado cuando solo parte del
archivo fue descargado (solo los primeros cuadros de un video, por
ejemplo).
ended Este evento es disparado cuando la reproduccin llega al final del
medio.
pause Este evento es disparado cuando la reproduccin es pausada.
play Este evento es disparado cuando el medio comienza a ser
reproducido.
error Este evento es disparado cuando ocurre un error. El evento es
despachado desde el elemento <source> (si se encuentra presente)
correspondiente a la fuente del medio que produjo el error.

MTODOS
Los mtodos ms comunes para esta API son:
play() Este mtodo comienza o contina la reproduccin del medio.
pause() Este mtodo pausa la reproduccin del medio.
load() Este mtodo descarga el archivo del medio. Es til en
aplicaciones dinmicas.
canPlayType(formato) Este mtodo indica si el formato del archivo
que queremos utilizar es soportado por el navegador o no. Retorna
una cadena vaca si el navegador no puede reproducir el medio y
los textos maybe (quizs) o probably (probablemente) basado
en la confianza que tiene de que el medio pueda ser reproducido o
no.

PROPIEDADES
Las propiedades ms comunes de esta API son:
paused Esta propiedad retorna true (verdadero) si la reproduccin del
medio se encuentra pausada o no ha comenzado.
ended Esta propiedad retorna true (verdadero) si la reproduccin lleg al
final del medio.
duration Esta propiedad retorna la duracin del medio en segundos.
currentTime Esta es una propiedad que puede retornar o recibir un valor
para informar la posicin en la cual el medio se encuentra reproduciendo
o establecer una nueva posicin donde comenzar a reproducir.
error Esta propiedad retorna el valor del error cuando un error ocurre.
buffered Esta propiedad ofrece informacin sobre la cantidad del archivo
que fue descargado e introducido en el buffer. Retorna un array
conteniendo datos sobre cada porcin del medio que ha sido
descargada. Si el usuario salta a otra parte del medio que no ha sido an
descargada, el navegador comenzar a descargar el medio desde ese
punto, generando una nueva porcin en el buffer. Los elementos del
array son accesibles por medio de los atributos end() y start(). Por
ejemplo, el cdigo buffered.end(0) retornar la duracin en segundos de
la primera porcin del medio encontrada en el buffer.