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>
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>
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?
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 pero, en Internet Explorer, esto ocurre tanto si están visibles como si están ocultos.
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.
Si 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:
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 pero, en Internet Explorer, esto ocurre tanto si están visibles como si están ocultos.
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.
Si 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>
7 comentarios:
Es tan complicado la manera de mostrar flash en la web.
Yo realmente no utilizo object solo embed (object= IE, embed= FIREFOX)
y el autoplay es según el archivo flash yo le pongo play true o false y no números (es costumbre)
Y para que no se repita le agrego loop true o false.
Acá te dejo un generador sencillo.
Ojo que para youtube es distinto, por eso dije antes, según el archivo flash.
Lo que vi que en el último código no pusistes el valor allowscriptaccess para llamar código JavaScript
Lo que no se para que se utiliza param name="salign" en algunos casos ¿vos tenes idea?
No sé si estará del todo relacionado con esto, pero ya que hablas de parámetros de YouTube tenemos "start" para que el vídeo comience en un punto determinado que no sea el principio (para los que no lo conozcan, se coloca donde dice esto:
...value="http://www.youtube.com/v/RY_NQZyBc3g&hl=es&fs=1&rel=0&autoplay=0&showsearch=0&showinfo=0" />
Añadiendo:
...value="http://www.youtube.com/v/RY_NQZyBc3g&hl=es&fs=1&rel=0&autoplay=0&showsearch=0&showinfo=0;start=NUMERO_DE_SEGUNDOS" />
Y así el vídeo irá directamente a ese punto: por ejemplo si queremos que empiece a los 2 min 5 seg tendríamos que escribir ;start=125
En fin, aprovecho para hacer la pregunta que no he conseguido descubrir: ¿hay alguna manera de hacer que se detenga también en un punto concreto? La opción lógica de probar con "stop" igual que antes "start" no funciona... :-B
Te digo Jmiur, bien contenta estoy que me hayas ayudado :D
Eso hace que el blog no sea pesado como antes, de esto solo sé que no sé nada.
Vku: En realidad, no es difícil en absoluto y la etiqueta OBJECT no es una etiqueta de IE sino una etiqueta universa; a decir verdad,, la que no es una etiqueta aceptada por la weorg es EMBED.
Mandelrot: He visto lo de start pero, aparentemente, no hay nada similar par decir dónde terminar. Miré en los foros y, al aprecer, todos preguntan lo mismo pero, no hay respuestas.
Graciela: Ah, esa es una buena solución, sin duda; sino, los blogs se hacen muy pesados de cargar :D
Verdaderamente un excelente entrada JMiur. Mucha mucha info util...
Hola, buen día.
Te agradezco el dato (param name="wmode" value="transparent") para que no se encimen los videos, ya que asi me pasaba en mi blog http://perladelpapaloapan.blogspot.com.
Gracias por el aporte y están muy claros y entendibles tus artículos, entré a travez de google buscando información sobre crosscol y resolví otro detalle.
Me alegro que funcionara, Manolo. Los objetos Flash funcionan de manera bastante extraña y son poco dóciles :D
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...