API JavaScript del visor de YouTube

Con las APIs de YouTube puedes construir tu propio visor basado en JavaScript.
Ver la forma de hacerlo en:

• YouTube JavaScript Player API Reference, para constrolar el visor estándar vía JavaScript.
  

• YouTube Chromeless Player Reference, para diseñar un visor a la medida.
  

Ver también estos ejemplos del API de YouTube y del reproductor Chromeless.

¿Conoces alguna aplicación interesante de estas APIs?

Visor de formatos multimedia Shadowbox.js

Shadowbox.js es un visor JavaScript compatible con la mayoría de navegadores y plataformas, que soporta diferentes formatos de imagen y de vídeo, individualmente o en forma de galerías. Su apariencia es fácilmente configurable mediante skins y soporta los siguientes frameworks:

• Yahoo! User Interface Library
• Ext (standalone)
• Prototype + Scriptaculous
• jQuery
• MooTools (requiere Fx.Styles y sus dependencias)
• Dojo Toolkit
  

Muy recomendable para visualizar vía web, de una misma manera, contenidos de diferentes formatos de imagen, vídeo (mov, flv, mpg, avi, wmv, YouTube, GoogleVideo, swf) o sitios web externos.
Ver ejemplos.

Estilos CSS en función del navegador

Con el siguiente truco, mediante JavaScript, puedes aplicar diferentes estilos CSS en función del navegador del usuario e incluso dependiendo del sistema operativo:

1. Incluye este JavaScript en tu página, de la siguiente manera:

<script src="css_browser_selector.js" type="text/javascript"></script>

2. Utiliza las siguientes clases CSS en tu hoja de estilos: .[so].[nav] (sin espacio entre .[so] y .[nav]), como en los siguientes ejemplos:

html.gecko div#header { margin: 1em; }
.opera #header { margin: 1.2em; }
.ie .mylink { font-weight: bold; }
.mac.ie .mylink { font-weight: bold; }
.[so].[nav] .mylink { font-weight: bold; }

Códigos de sistema operativo disponibles [so]:

• win - Microsoft Windows
• linux - Linux (x11 y linux)
• mac - Mac OS

Códigos de navegador disponibles [nav]:

• ie - Internet Explorer (todas las versiones)
• ie6 - Internet Explorer 6.x
• ie5 - Internet Explorer 5.x
• gecko - Mozilla, Firefox, Camino
• opera - Opera (todas las versiones)
• opera8 - Opera 8.x
• opera9 - Opera 9.x
• konqueror - Konqueror
• webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira

(Fuente: Rafael Lima).

Trucos JavaScript

Trucos curiosos:

• Haz que las imágenes de una página web se vuelvan locas. Visita cualquier página con imágenes (por ejemplo http://flickr.com/explore) y ejecuta el siguiente código en la barra de direcciones del navegador:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);

Curioso eh!?