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 funci"n.
Sintaxis bsica para el elemento <vi deo>.
o !ay un "ormato estndar para todos los
nave#adores
#uscadores $gg M%& 'ebM
Firefox 4.0 * x x
Firefox 3.5 3.6 x
Safari 3 * x
Chrome 6 * x x x
Chrome 3 - 5 x x
Opera 10.6 * x x
Opera 10.5 x
IE 9 + x
Este elemento ofrece varios atributos para establecer su
comportamiento y configuraci"n. Los atributos (idt) y
)eig)t* 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 reempla+ado por el elemento source! y su
propio atributo src para declarar varias fuentes con
diferentes formatos
$l elemento <video>
,unto con controls* tambi-n podemos usar los siguientes.
/utoplay. el navegador comen+ar a reproducir el video automticamente
tan pronto como pueda.
Loop. el navegador comen+ar a reproducir el video nuevamente cuando
llega al final.
%oster. Este atributo es utili+ado 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 deber0a ser cac)eado* por lo general
con el prop"sito de minimi+ar trfico innecesario. El segundo valor*
metadata* recomendar al navegador que trate de capturar informaci"n
acerca de la fuente 1por ejemplo* dimensiones* duraci"n* primer cuadro*
etc23. El tercer valor* auto* es el valor configurado por defecto que le
sugerir al navegador descargar el arc)ivo tan pronto como sea posible.
%tributos para <video>
&ro#ramando un
reproductor de video
4ada navegador tiene sus propios botones y barras de
progreso* e incluso sus propias funciones.
HTML5 proporciona nuevos eventos* propiedades y m-todos
para manipular video e ntegrarlo al documento.
%odremos crear nuestro propio reproductor de video y
ofrecer las funciones que queremos usando HTML* 455 y
,avascript. El video es a)ora parte integral del documento.
Todo reproductor de video necesita un panel de control con
al menos algunas funciones bsicas.6n elemento nav! fue
agregado luego de video!. Este elemento nav! contiene
dos elementos div! 1botones y barra3 para ofrecer un bot"n
78eproducir9 y una barra de progreso.
$l dise'o
E:plicaremos c"mo aplicar los necesarios eventos* m-todos
y propiedades para procesamiento bsico de video.
/lgunas pocas funciones simples que nos permitirn
reproducir y pausar el video* mostrar una barra de progreso
mientras el video es reproducido y ofrecer la opci"n de )acer
clic sobre esta barra para adelantar o retroceder el video.
$l c(di#o
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 caracter0sticas del
elemento video!.
$l elemento <audio>
HTML5 provee dos nuevos elementos HTML para
procesar medios y una /%; espec0fica para acceder
a la librer0a de medios. video! Este elemento nos
permite insertar un arc)ivo de video en un
documento HTML. audio! Este elemento nos
permite insertar un arc)ivo de audio en un
documento HTML.
$lementos
controls Este atributo* si est presente* activa los controles por defecto. 4ada
navegador provee sus propias funciones* como botones para reproducir y
pausar el medio* as0 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 )ar que el navegador reprodu+ca el medio indefinidamente.
preload Este atributo recomienda al navegador qu- )acer con el medio. %uede
recibir tres valores diferentes. none* metadata y auto. El valor none le dice al
navegador que no descargue el arc)ivo )asta que el usuario lo ordene. El valor
metadata le recomienda al navegador descargar informaci"n bsica sobre el
medio. El valor auto le dice al navegador que comience a descargar el arc)ivo
tan pronto como sea posible.
%tributos
E:isten algunos atributos que son espec0ficos
para el elemento video!. poster Este atributo
provee una imagen para mostrarla en lugar del
video antes de ser reproducido.
(idt) Este atributo determina el tama<o del video
en pi:eles.
)eig)t Este atributo determina el tama<o del video
en pi:eles.
%tributos de video
E:isten algunos atributos que son espec0ficos
para el elemento video!. poster Este atributo
provee una imagen para mostrarla en lugar del
video antes de ser reproducido.
(idt) Este atributo determina el tama<o del video
en pi:eles.
)eig)t Este atributo determina el tama<o del video
en pi:eles.
%tributos de video
Los eventos ms relevantes para esta /%; son.
progress Este evento es disparado peri"dicamente para informar el progreso en la
descarga del medio.
canplayt)roug) Este evento es disparado cuando el medio completo puede ser
reproducido sin interrupci"n.
canplay Este evento es disparado cuando el medio puede ser reproducido. /
diferencia del evento previo* -ste es disparado cuando solo parte del arc)ivo fue
descargado 1solo los primeros cuadros de un video* por ejemplo3.
ended Este evento es disparado cuando la reproducci"n llega al final del medio.
pause Este evento es disparado cuando la reproducci"n es pausada.
play Este evento es disparado cuando el medio comien+a a ser reproducido.
error Este evento es disparado cuando ocurre un error. El evento es despac)ado
desde el elemento source! 1si se encuentra presente3 correspondiente a la
fuente del medio que produjo el error.
$ventos
Los m-todos ms comunes para esta /%; son.
play13 Este m-todo comien+a o contina la reproducci"n del medio.
pause13 Este m-todo pausa la reproducci"n del medio.
load13 Este m-todo descarga el arc)ivo del medio. Es til en
aplicaciones dinmicas.
can%layType1formato3 Este m-todo indica si el formato del arc)ivo
que queremos utili+ar es soportado por el navegador o no. 8etorna
una cadena vac0a si el navegador no puede reproducir el medio y
los te:tos 7maybe9 1qui+s3 o 7probably9 1probablemente3 basado
en la confian+a que tiene de que el medio pueda ser reproducido o
no.
M)todos
Las propiedades ms comunes de esta /%; son.
paused Esta propiedad retorna true 1verdadero3 si la reproducci"n del medio se
encuentra pausada o no )a comen+ado.
ended Esta propiedad retorna true 1verdadero3 si la reproducci"n lleg" al final del
medio.
duration Esta propiedad retorna la duraci"n del medio en segundos.
currentTime Esta es una propiedad que puede retornar o recibir un valor para
informar la posici"n en la cual el medio se encuentra reproduciendo o establecer
una nueva posici"n donde comen+ar a reproducir.
error Esta propiedad retorna el valor del error cuando un error ocurre.
buffered Esta propiedad ofrece informaci"n sobre la cantidad del arc)ivo que fue
descargado e introducido en el buffer. 8etorna un array conteniendo datos sobre
cada porci"n del medio que )a sido descargada. 5i el usuario salta a otra parte del
medio que no )a sido an descargada* el navegador comen+ar a descargar el
medio desde ese punto* generando una nueva porci"n en el buffer. Los elementos
del array son accesibles por medio de los atributos end13 y start13. %or ejemplo* el
c"digo buffered.end1=3 retornar la duraci"n en segundos de la primera porci"n del
medio encontrada en el buffer.
&ropiedades