Los objetos de Flash que insertamose en una web tienen sus mañas. Si bien puede utilizarse CSS para personalizarlos, no todas las propiedades son aceptadas y otras son ignoradas o no tienen ningún efecto.
El objeto más usual, el que todos hemos agregado alguna vez es el reproductor de YouTube y, por lo general, copiamos y pegamos el código que nos da el mismo servicio aunque ese código no contenga más que algunos de los parámetros disponibles:
El objeto más usual, el que todos hemos agregado alguna vez es el reproductor de YouTube y, por lo general, copiamos y pegamos el código que nos da el mismo servicio aunque ese código no contenga más que algunos de los parámetros disponibles:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/RY_NQZyBc3g&hl=es_ES&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RY_NQZyBc3g&hl=es_ES&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
Esos parámetros extras son explicados por el mismo YouTube:
rel 0 | 1 mostrar/ocultar los videos relacionados
autoplay 0 | 1 habilitar/deshabilitar la autoejecución
loop 0 | 1 habilitar/deshabilitar la reproducción infinita
disablekb 0 | 1 habilitar/deshabilitar el uso del teclado
aunque algunos no son enumerados.
fs 0 | 1 habilitar/deshabilitar la pantalla completa
showsearch 0 | 1 mostrar/ocultar la barra de búsqueda
showinfo 0 | 1 mostrar/ocultar el titulo y la valoración
iv_load_policy 1 | 2 | 3 mostrar/ocultar las anotaciones (usar 3 para ocultarlas)
Veamos uno de los parámetros que tienen sus complciacione: autoplay. Para usarlo, basta agregar &autoplay=1 a la URL:
rel 0 | 1 mostrar/ocultar los videos relacionados
autoplay 0 | 1 habilitar/deshabilitar la autoejecución
loop 0 | 1 habilitar/deshabilitar la reproducción infinita
disablekb 0 | 1 habilitar/deshabilitar el uso del teclado
aunque algunos no son enumerados.
fs 0 | 1 habilitar/deshabilitar la pantalla completa
showsearch 0 | 1 mostrar/ocultar la barra de búsqueda
showinfo 0 | 1 mostrar/ocultar el titulo y la valoración
iv_load_policy 1 | 2 | 3 mostrar/ocultar las anotaciones (usar 3 para ocultarlas)
Veamos uno de los parámetros que tienen sus complciacione: autoplay. Para usarlo, basta agregar &autoplay=1 a la URL:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/RY_NQZyBc3g&hl=es_ES&fs=1&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/RY_NQZyBc3g&hl=es_ES&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
Este es un ejemplo simple 
No hay problema. Lo mismo ocurre si, en lugar de usar el código de YouTube, usamos un código válido:
No hay problema. Lo mismo ocurre si, en lugar de usar el código de YouTube, usamos un código válido:
<object width="425" height="350" type="application/x-shockwave-flash" data="http://www.youtube.com/v/RY_NQZyBc3g&autoplay=1"><param name="movie" value="http://www.youtube.com/v/RY_NQZyBc3g&autoplay=1" /><param name="allowfullscreen" value="true"/></object>
Este es el ejemplo
No hay diferencias visibles.
Ahora bien, muchas veces, lo que hacemos es mantener el video oculto y mostrarlo al hacer click en un enlace ¿Qué pasará entonces si tenemos el autoplay activado?
Miren este ejemplo online
Al hacer click en el ícono, el video comenzará a reproducirse. Bien, es lo que queríamos. Ahora, haremos click otra vez en el ícono para ocultarlo ... y aquí vienen las diferencias y algo con lo que hay que tener cuidado. En Internet Explorer, el video continuará ejecutándose pero, en el resto de los navegadores, no. En IE, podríamos seguir haciendo click en el ícono una y otra vez para ver y ocultar el video sin que este se interrumpa pero, en otros navegadores, cada vez que desplegamos el video, este comienza desde el inicio y si lo ocultamos, se detiene.
Esto es así porque tanto en Firefox, como en Opera como en Chrome, si el video o el DIV que lo contiene está oculto con la etiqueta display:none; este, no se ejecuta, tenga o no tenga autoplay.
Este detalle es muy importante y algo similar ocurrirá si se trata de un archivo SWF ya que, por defecto, estos se autoejecutan (este es un ejemplo) pero, en Internet Explorer, esto ocurre tanto si están visibles como si están ocultos (este es otro ejemplo ).
Una particularidad más para tratar de responder a algunas preguntas repetidas.
Los objetos de Flash se posicionan por encima de cualquier otro y eso provoca que en ciertos casos, algo que debería estar "arriba" quede oculto por el video mismo; suele ocurrir con ciertas ventanas modales y un ejemplo más simple lo podemos ver si hay algún tipo de elemento fijo en la página.
En este demo online, hay una entrada donde el header es fijo (position:fixed;) y la página es larga. Allí, vemos un video que tiene el código tal cual nos lo da YouTube. Si nos desplazamos hacia abajo, veremos que el video se superpone al header en lugar de pasar por debajo como lo hace el resto de la página.
Para corregir este problema, lo que debemos hacer es agregarles un parámetros que, a mi juicio es un parámetro que debe estar siempre:
<param name="wmode" value="transparent" />
De esta forma, tal como se ve en el segundo video, este seguirá las mismas reglas que el resto de los elementos de la página.
¿Y cómo centrarlos?
Hay dos metodos; podemos poner el código en un DIV y centrarlo:
<div style="text-align: center;"> ....... aqui el código del objeto ....... </div>
o bien colocar estilo en la misma etiqueta OBJECT si es que optamos por un código que no use la etiqueta EMBED:
No hay diferencias visibles.
Ahora bien, muchas veces, lo que hacemos es mantener el video oculto y mostrarlo al hacer click en un enlace ¿Qué pasará entonces si tenemos el autoplay activado?
Miren este ejemplo online
Al hacer click en el ícono, el video comenzará a reproducirse. Bien, es lo que queríamos. Ahora, haremos click otra vez en el ícono para ocultarlo ... y aquí vienen las diferencias y algo con lo que hay que tener cuidado. En Internet Explorer, el video continuará ejecutándose pero, en el resto de los navegadores, no. En IE, podríamos seguir haciendo click en el ícono una y otra vez para ver y ocultar el video sin que este se interrumpa pero, en otros navegadores, cada vez que desplegamos el video, este comienza desde el inicio y si lo ocultamos, se detiene.
Esto es así porque tanto en Firefox, como en Opera como en Chrome, si el video o el DIV que lo contiene está oculto con la etiqueta display:none; este, no se ejecuta, tenga o no tenga autoplay.
Este detalle es muy importante y algo similar ocurrirá si se trata de un archivo SWF ya que, por defecto, estos se autoejecutan (este es un ejemplo
) pero, en Internet Explorer, esto ocurre tanto si están visibles como si están ocultos (este es otro ejemplo ).Una particularidad más para tratar de responder a algunas preguntas repetidas.
Los objetos de Flash se posicionan por encima de cualquier otro y eso provoca que en ciertos casos, algo que debería estar "arriba" quede oculto por el video mismo; suele ocurrir con ciertas ventanas modales y un ejemplo más simple lo podemos ver si hay algún tipo de elemento fijo en la página.
En este demo online, hay una entrada donde el header es fijo (position:fixed;) y la página es larga. Allí, vemos un video que tiene el código tal cual nos lo da YouTube. Si nos desplazamos hacia abajo, veremos que el video se superpone al header en lugar de pasar por debajo como lo hace el resto de la página.
Para corregir este problema, lo que debemos hacer es agregarles un parámetros que, a mi juicio es un parámetro que debe estar siempre:
<param name="wmode" value="transparent" />
De esta forma, tal como se ve en el segundo video, este seguirá las mismas reglas que el resto de los elementos de la página.
¿Y cómo centrarlos?
Hay dos metodos; podemos poner el código en un DIV y centrarlo:
<div style="text-align: center;"> ....... aqui el código del objeto ....... </div>
o bien colocar estilo en la misma etiqueta OBJECT si es que optamos por un código que no use la etiqueta EMBED:
<object style="display:block; margin:0 auto;" width="480" height="385" type="application/x-shockwave-flash" data="http://www.youtube.com/v/RY_NQZyBc3g&hl=es&fs=1&rel=0&autoplay=0&showsearch=0&showinfo=0"><param name="movie" value="http://www.youtube.com/v/RY_NQZyBc3g&hl=es&fs=1&rel=0&autoplay=0&showsearch=0&showinfo=0" /><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true"/></object>
0 comentarios:
Publicar un comentario