Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Etiquetas audio y video en Firefox

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="http://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.

Nota: El elemento source todavía no es completamente funcional en Firefox. Mire el bug 449363 para más detalles.

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

 

 

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Nukeador, deimidis
 Última actualización por: Nukeador,