En Firefox 3.5 se ha incorporado la posibilidad de usar las etiquetas para los elementos audio y video, agregados a las especificaciones de HTML 5, lo que permite insertar fácilmente archivos de audio o video en los documentos HTML. Actualmente sólo pueden usarse los formatos Ogg y WAV, pero se espera agregar la posibilidad de usar otros formatos en el futuro.
Insertar medios
Insertar medios en su documento HTML es sencillo:
<video src="https://v2v.cc/~j/theora_testsuite/320x240.ogg" autoplay> Your browser does not support the <code>video</code> element. </video>
Este ejemplo reproduce un video del sitio web de Theora.
Se pueden agregar múltiples archivos usando el elemento source para especificar diferentes archivos con diferentes formatos para distintos navegadores. Por ejemplo:
<video autoplay> <source src="foo.ogg" type="video/ogg"> <source src="foo.mov"> Your browser does not support the <code>video</code> element. </video>
ejecutará el archivo OGG en los navegadores que puedan reproducir ese formato. Si el navegador no puede reproducir ese formato, intentará usar el archivo MOV.
Controlar la reproducción de los archivos
Una vez que haya insertado el archivo en el documento HTML usando los nuevos elementos, puede controlarlos usando JavaScript. Por ejemplo, para empezar (o reiniciar) la reproducción, puede hacer esto::
var v = document.getElementsByTagName("video")[0];
v.play();
La primera línea localiza el elemento en el documento y la segunda usa el método play() del mismo, como está definido en la interface nsIDOMHTMLMediaElement que se usa para implementar los elementos de medios.
Eventos en medios
Muchos eventos son enviados cuando se manejan medios:
| Nombre del evento | Descripción |
abort | Se envía cuando se aborta la reproducción, por ejemplo, cuando el archivo se está reproduciendo y es reiniciado, se envía este evento. |
canplay | Se envía cuando ya está disponible la suficiente cantidad del archivo para que pueda reproducirse, por lo menos por unos cuantos cuadros. Se corresponde con CAN_PLAY readyState. |
canplaythrough | Se envía cuando el estado cambia a CAN_PLAY_THROUGH, lo que indica que puede reproducirse completamente el archivo sin interrupciones, asumiendo que la tasa de descaraga se mantendrá en el nivel actual. |
canshowcurrentframe | El cuadro actual fue cargado y puede mostrarse. Este se corresponde a CAN_SHOW_CURRENT_FRAME readyState. |
dataunavailable | Se envía cuando el estado cambia a DATA_UNAVAILABLE. |
durationchange | Los metadatos fueron cargados o han cambiado, lo que indica un cambio en la duración del archivo. Esto se envía, por ejemplo, cuando se ha cargado tanto del archivo que se conoce la duración total del mismo. |
emptied | El archivo se ha vaciado. Por ejemplo, este evento se envía si el archivo había sido cargado (o parcialmente cargado), y se llamó al método load() para recargarlo. |
empty | Se envía cuando hay un error y el archivo está vacío. |
ended | Se envía cuando se termina la reproducción. |
error | Se envía cuando hay un error. El atributo error del elemento contiene más información. |
load | El archivo se descargó completamente. |
loadedfirstframe | El primer cuadro del archivo se terminó de descargar. |
loadedmetadata | Los metadatos del archivo se terminaron de descargar, todos los atributos contienen la mayor cantidad de información posible. |
loadstart | Se envía cuando comienza la carga del archivo. |
pause | Se envia cuando se pone en pausa la reproducción. |
play | Se envía cuando se comienza la reproducción o cuando se reinicia. |
ratechange | Se envía cuando cambia la velocidad de reproducción. |
seeked | Se envía cuando se completa la operación de búsqueda. |
seeking | Se envía cuando comienza la operación de búsqueda. |
timeupdate | El tiempo indicado por el atributo currentTime del elemento cambió. |
volumechange | Se envía al cambiar el volumen del audio (cuando el volumen es elegido y cuando cambia el atributo muted). |
waiting | Se envía cuando la operación solicitada (como la reproducción) se retrasa porque espera que se complete otra operación (como una búsqueda). |
Fácilmente puede vigilar estos eventos, si usa un código parecido al siguiente:
var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;
Este ejemplo obtiene el primer elemento de video del documento y le adhiere un event listenert, esperando por el evento seeked, que se envía cuando termino una operación de búsqueda. El listener simplemente ejecuta el método play() del elemento, que comenzará la reproducción.
En la línea 4, se configura el atributo currentTime a 10.0, que inicia una operación de busqueda a la marca de los 10 segundos en el archivo. Esto genera que se envíe un evento seeking cuando comienza la operación, después un evento seeked se enviara cuando la búsqueda se haya completado.
En otras palabras, en este ejemplo se busca la marca de los 10 segundos en el archivo, y luego comienza la reproducción.
Vea también