Iniciar o detener Flash desde HTML con Javascript
27 de Julio 2009
Es una buena práctica, sobretodo cuando se usan vídeos o animaciones flash que contengan sonido, el dejar la reproducción de la película en manos del usuario en vez de iniciarla automáticamente.
Las veces que esto se cumple se suele hacer colocando un control en la propia película flash, como un icono de Play o similar semitransparente.
El uso exclusivo de este método puede suponer un problema para usuarios de navegadores que no sean Internet Explorer y no utilicen ratón, ya que los flashes no pueden recibir el foco mediante teclado a no ser que se activen previamente con el ratón.
Incluir además unos enlaces en HTML para iniciar o detener la reproducción de Flash supondría una pequeña mejora de accesibilidad para estos usuarios.
Los pasos que hay que seguir para conseguirlo son:
- Dar un ID al object que contiene el Flash
- Detener la reproducción automática de la animación:
- Si la animación está en la línea de tiempo principal basta con usar el parámetro play con el valor false en el HTML
- Si la animación está en otra línea de tiempo tendremos que detenerla en el propio flash mediante un nombreDeInstancia.stop() en la línea de tiempo principal.
- Asignar la función de iniciar / detener a los enlaces correspondientes en HTML
Ejemplos de los dos casos
Object película Flash con animación en la línea de tiempo principal
HTML del flash
<object width="155" height="17" id="ejemplo-1" type="application/x-shockwave-flash" data="ejemplo.swf">
<param name="src" value="ejemplo.swf" />
<param name="play" value="false" />
</object>
Controles HTML (lo ideal para una degradación elegante sería pintarlos con Javascript, ya que sólo con Javascript habilitado pueden funcionar)
<ul id="controles-1">
<li><a href="#">Iniciar reproducción</a></li>
<li><a href="#">Pausar reproducción</a></li>
</ul>
Javascript
var control1 = document.getElementById('controles-1').getElementsByTagName('a');
control1[0].onclick = function(){
document.getElementById('ejemplo-1').Play();
return false;
}
control1[1].onclick = function(){
document.getElementById('ejemplo-1').StopPlay();
return false;
}
Demo
Object película Flash con animación en una línea de tiempo distinta a la principal
HTML del flash
<object width="165" height="48" id="ejemplo-2" type="application/x-shockwave-flash" data="ejemplo-2.swf">
<param name="src" value="ejemplo-2.swf" />
</object>
Javascript
En este caso, para iniciar o detener la animación tendremos que usar los métodos TPlay("ruta_a_linea_tiempo") y TStopPlay("ruta_a_linea_tiempo")
var control2 = document.getElementById('controles-2').getElementsByTagName('a');
control2[0].onclick = function(){
document.getElementById('ejemplo-2').TPlay("_root/mc_barra");
return false;
}
control2[1].onclick = function(){
document.getElementById('ejemplo-2').TStopPlay("_root/mc_barra");
return false;
}
Demo
Existen otros métodos predefinidos útiles para controlar la reproducción de una película Flash, como Rewind() o GotoFrame()
Aprovecho este post para recomendar un par de recursos que pueden sernos de gran utilidad a la hora de mejorar la accesibilidad de vídeo Flash (ya que por la página de recursos no se pasa ni GOOGLE):
- JW Player Controls
- Reproductor de Flash Vídeo que permite controlar la reproducción mediante teclado, añadir subtítulos y descripciónes de audio y además añade los atributos apropiados ARIA. Utiliza JW FLV Player junto con un plugin de accesibilidad. Los controles javascript se proporcionan mediante la librería Dojo.
- Ejemplos de control del reproductor JW Player mediante Javascript
- Varios ejemplos de control de la reproducción de contenido multimedia mediante Javascript usando JW Player.
Más información
