Embeber Objetos Audio y Video con Ajax usando swfobject
Algo realmente curioso e interesante es ver que el wp-standalone-player utiliza la
funcion Javascript para embeber Objetos Flash usando DOM creado por “Geoff Stearns, Michael Williams, y Bobby van der Sluis”
Casualmente es muy util para los que quieran embeber Objetos Flash mediante AJAX.
Es un problema muy tipico el querer embeber video de youtube y que el innerHTML no funcione. (Sinceramente da muchos dolores de cabeza).
Pero con este pequeño include llamado player.js de tan solo 11kb solucionamos todos nuestros problemas y podemos embeber indistintamente Objetos Flash (SWF) Locales, como URL de Objetos, como es el caso de los videos de Youtube.
Vamos a aclarar que salio una version de “WordPress Audio Player“ version standalone. Por lo tanto podemos customizarla y usarla en cualquiera de nuestros sitios webs (aunque no tengan WP instalado).
Entonces hasta aca tenemos:
- Funcion JS para embeber objetos flash con DOM de 11 Kb.
- Reproductor de audio WordPress Audio Player (Standalone)
- Y una funcion para incluir Objetos Flash (mas especificamente Videos Youtube)
Aqui abajo les muestro como implementarlo:
<!– HEADER –>
<script src=”player/player.js” type=”text/javascript”></script>
<script type=”text/javascript”>
// VIDEO DE YOUTUBE
function show_video(element_descripcion, video_objeto, video_descripcion){
var div_element_descrip = document.getElementById(element_descripcion);
audioplayer_swfobject.embedSWF(video_objeto, “main_video”, “295″, “237″, “9.0.0″);
div_element_descrip.innerHTML = video_descripcion;
}// WP_STANDALONE_PLAYER ( la siguiente linea, invoca el audioPlayer )
AudioPlayer.setup(”http://<?php echo $tudominio; ?>/player/player.swf”, {
width: 290
});
</script>
Son 2 funciones totalmente distintas; la primera, show_video( ), es la que usaremos para embeber video. Y AudioPlayer.setup( ), es la que invoca al reproductor de audio. Lo que tienen en comun, es que ambas funciones utilizan el mismo Include player.js con el que embeben los tags usando DOM.
En el Body:
<!– BODY –>
<!– audio player –>
<p id=”audioplayer_1″>Alternative content</p>
<script type=”text/javascript”>
AudioPlayer.embed(”audioplayer_1″, {soundFile: “http://<?php echo $tudominio;?>/<?php echo $ruta_de_tu_audio .’/’. $nombre_archivo; ?>”,transparentpagebg: “yes”,titles: “descripcion del audio”});
</script><!– video player –>
<script type=”text/javascript”>
show_video(’video_descripcion’, ’http://www.youtube.com/v/codigovideo’, ‘la descripcion del video desde la base de datos’);
</script>
<div id=”main_video”></div>
<div id=”video_descripcion”></div>
Multiples Instancias:
Los contenedores para cada reproductor son los que estab en negrita.
Para agregar multiples reproductores de audio, solo basta con cambiar el ID del contenedor y duplicar el codigo. Para el caso del reproductor de video habria que hacer unas minimas modificaciones en la funcion show_video( ), y pasandole como parametro el identificador del DIV podriamos tener multiples reproductores de video.
Bien!. veran que es muy facil!!!
UN TIP > USAR YOUTUBE COMO SERVIDOR DE VIDEO STREAM:
Esto es para los que ahorramos ancho de banda. (Hoy en dia los que tienen reproductores de video propios insertados en su sitio web, estimo que es porque el sitio les da mucha ganancia) 
Lo que yo hice fue guardar toda las rutas de los videos de youtube en mi base de datos. Para ello, se me presento un inconveniente; las URL’s de los videos son diferentes a la URL de publicacion que estan en los tags.. se entiende?.
Ejemplo: esta es la URL del video que esta en la barra de direcciones del navegador, http://www.youtube.com/watch?v=Mxo9D_aTrx4. (Esta URL NO FUNCIONA!).
pero si miramos la URL del objeto a insertar:
<object width="425" height="344"><param name="movie" value="
http://www.youtube.com/v/G8whC4Me8d4&hl=en&fs=1“></param> <param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param> <embed src=”http://www.youtube.com/v/G8whC4Me8d4&hl=en&fs=1” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object>
Ja, si! es totalmente distinta; en mi caso, necesitaba guardar solo la URL en el campo de la Base de datos, entonces lo que hice fue armar una expresion regular que me devuelva la URL del video de forma limpia.
function validate_youtube(text_element) {
if (text_element.value != ""){
var matches = "";
var expression = /((http:\/\/)|(www\.[^ \[\]\(\)\n\r\t]+)|(([012]?[0-9]{1,2}\.){3}[012]?[0-9]{1,2})\/)([^ \[\]\(\),;\”‘<>\n\r\t]+)([^\. \[\]\(\),;\”‘<>\n\r\t])|(([012]?[0-9]{1,2}\.){3}[012]?[0-9]{1,2})/gi;
var rx = new RegExp(expression);
var str = text_element.value;
matches = str.match(rx);
text_element.value=matches[0];
}
}
La podes agregar en el textfield con el evento onChange, entonces cuando hagas “Copy/Paste” del codigo <object…/object> en el textbox de tu CMS, obtendras la URL on the fly.
Esto ultimo tambien podria hacerce mucho mejor con el API de google para Youtube, y se podrian obtener hasta los comentarios de los videos (estuve viendo el codigo y no es para nada dificil). Pero yo necesitaba una solucion sencilla y rapida, asi que dejamos el API para el Upgrade del sitio.
Nicolas. tech-nico.com/blog
