JMiur [E]

El reproductor de Google Video tiene algunas particularidades que nos permiten personalizarlo basándonos en el código que nos dan para insertarlo en una página web.

Por defecto es algo así:
<embed style="width:anchopx; height:altopx;"
id="VideoPlayback"
type="application/x-shockwave-flash"
src="http://video.google.com/googleplayer.swf?docId=XXXXXXX&hl=XX" flashvars="">
</embed>
No es un código muy "aceptable". La etiqueta EMBED no está aceptada como válida y en el editor de Blogger suele causar problemas.

De cualquier manera, de todo eso, lo único realmente importante es la dirección URL del video:

http://video.google.com/googleplayer.swf?docId=XXXXXXX&hl=XX

Donde XXXXXXX es un número que indica el código del vídeo a reproducir. El valor &hl=XX es el idioma y es irrelevante y el ancho y el alto pueden ser definidos por nosotros aunque siempre es bueno respetar la proporción original.

Mucho más razonable, es reemplazar ese código por un código válido que sirve tanto para este servicio como para cualquier otro y que funcionará en cualquier navegador, tanto para videos como para archivos SWF:
<object width="ancho" height="alto"
id="VideoPlayback"
type="application/x-shockwave-flash"
data="http://video.google.com/googleplayer.swf?docId=XXXXXXX&hl=XX">
<param name="movie"
value=http://video.google.com/googleplayer.swf?docId=XXXXXXX&hl=XX" />
</embed>
En el editor de Blogger, siempre todo en una sóla línea y, eventualmente, si es necesario, podemos agregar otros parámetros con la etiqueta PARAM. Por ejemplo, estos parámetros definen la calidad y las opciones disponibles:
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="allowFullScreen" value="true" />
<param name="menu" value="false" />
Si queremos que el archivo de Flash sea transparente, usamos:
<param name="wmode" value="transparent" />
Si queremos que tenga un color de fondo usamos:
<param name="bgcolor" value="#elColor" />
Y en muchos casos, cuando el SWF es interactivo, tiene botones o enlaces, debemos agregar el parámetro requerido para habilitar esas funciones:
<param name="allowScriptAccess" value="sameDomain" />
Pero, vamos a los parámetros específicos del reproductor de Google Videos. Este sería un ejemplo normal, con los valores por defecto:

Click para ver el video NORMAL

Sea cual sea el código que usemos, podemos agregarle más parámetros.

Podemos definir el tipo de skin del reproductor, utilizando estos valores:

playerMode=embedded es el valor por defecto
playerMode=simple no tiene barra de progreso ni control del volumen
playerMode=mini es la versión más sencilla, sólo tiene un botón de Play
playerMode=clickToPlay se utilizado para videos que contengan publicidad de AdSense

Para determinar si el video se debe iniciar automáticamente usamos:

autoPlay=false es el valor por defecto, no se autoreproduce
autoPlay=true comienza a reproducirse sin necesidad de hacer click en Play

Para definir si queremos que se reproduzca una vez o no usamos:

loop=false es el valor por defecto,
loop=true cuando termina, comienza otra vez

Por último, podemos añadir un enlace al final de los videos:

showShareButtons=false es el valor por defecto
showShareButtons=true se agrega un botón para compartir el video

Eventualmente, un parámetro extra nos permite habilitar los subtítulos si es que el video los admite:

subtitle=on

Esos parámetros podemos agregarlos de dos maneras, al final de la dirección o usando la etiqueta PARAM. Si la dirección original es:

http://video.google.com/googleplayer.swf?docId=XXXXXXX&hl=XX

Podemos usar esto:

http://video.google.com/googleplayer.swf?docId=XXXXXXX&hl=XX&playerMode=simple

Es decir, agregar el nombre y el valor del parámetros, precedidos por el carácter &.

La otra posibilidad es usar la etiqueta PARAM:
<param name="FlashVars" value="playerMode=simple&loop=true">
antes de la etiqueta </object>

El mismo video con el skin SIMPLE

El mismo video con el skin MINI

REFERENCIAS:
  • Google Operating System
  • 8 comentarios:

    juan pedro  

    Jorge, excelente como siempre, con explicaciones muy claras como sencillas.
    Muchas gracias, juan pedro

    Responder
    JMiur  

    Gracia por el comentario, Juan :)

    Responder
    Antony (Vistos Buenos)  

    Hola! Pasa por mi blog por un premio...

    Responder
    JMiur  

    Gracias, Antony, te lo agradezco mucho :$

    Responder
    Amador López Criado  

    Hola JMiur. He leído varias entradas intentando solucionar una duda, pero no sé si no he sido capaz de encontrarla o no has comentado nada sobre ella. Tampoco sé si es éste el mejor sitio para dejar el comentario. El asunto es el siguiente: haciendo pruebas con distintos vídeos-tutoriales los he añadido al blog de pruebas utilizando la herramienta del editor de blogger de "añadir vídeo". Esto genera un código que automáticamente se incluye en la entrada, y en el que no encuentro la ruta para acceder. Pregunto ¿dónde van a parar estos vídeos? ¿Se puede acceder a ellos? ¿Se pueden eliminar del alojamiento? Gracias.

    Responder
    JMiur  

    Realemente no sé dónde se guardan y no parece posible acceder a ellos. Por ese motivo nunca me ha gustado ese invento de Blogger :D

    Responder
    Amador López Criado  

    :S Siendo así, seguiré el ejemplo y no volveré a utilizarlo. Gracias.

    Responder
    JMiur  

    Creo que es lo mejor :D

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    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 ...

     
    CERRAR