dijous, 1 de setembre del 2011

Personalitzando el player de youtube

Una opción muy interesante para mostrar los vídeos de youtube de una manera un tanto mas "integrada" en nuestra web es usar el chromeless player. Este player es estéticamente mas liviano y no tiene controles. Por defecto sólo permite encender/parar el vídeo pulsando sobre el, esta opción puede ser suficiente para un vídeo corto que queramos incrustar en nuestra web.

De todas formas con un mínimo de javascript podemos darle unos controles personalizados para arrancar/parar y mutearlo sin apenas esfuerzo. En el summun se pueden conseguir todas las virguerías que muestran desde youtube

En el código adjunto yo he creado 3 divs con un texto que al pulsar sobre ellos mediante un evento jQuery se lanzan las acciones contra el vídeo. De todas formas lo normal será, mediante CSS, posicionar estos DIVs y darles una imagen con los iconos que queramos.

Para hacer funcionar este ejemplo se requiere de jquery y swfobject. Para el video hay un DIV que hace de contenedor y lo que hace el javascript es llamar a la función loadPlayer() que se encarga de pasar el ID del vídeo que queremos cargar y le dice donde esta el DIV que contendrá el video.

    Página sin título
    
    


You need Flash player 8+ and JavaScript enabled to view this video.
PLAY
STOP
SPK

Cap comentari:

Publica un comentari a l'entrada