Quicktime embed

18Abr08

Buenas a todos, ya se que hace mucho que no paso por aqui. Pero hoy en <cuña>www.interactiu.com – tu empresa de diseño y creación de paginas web</cuña>, no tengo mucho trabajo que hacer. Ya he acabado los trabajos que me dieron para hacer <curriculum>www.eram.cat</curriculum>. Así que estoy dispuesto a postear una de las pequeñas cosas que he aprendido estos dias.

Y es que a la hora de reproducir videos por internet, es bueno saber la codificación de estos. Así que como erma.cat tiran de audiovisuales, prefieren que los videos sean de la extensión *.MOV aunque tienen videos en *.FLV. Así que lo que hice es un condicional que viera la extension del archivo y dependiendo de la extensión, insertara el reproductor quicktime o el flowplayer . Ya se que muchos me diran.. per si el flowplayer reproduce archivos *.MOV!! Ya lo se, pero son exigencias del cliente, y tambien no tira muy bien con los archivos *.MOV he tenido problemas de carga y de tiempos de espera. Asi que tengo los 2, son solo 5 lineas mas de codigo.

Así que voy a deciros como instalar cada uno de estos reproductores para que los podais usar en vuestro blog o pagina personal, o de empresa.

Primero de todo haré referencia a las paginas de documentación. Por favor si no te sale algo, mira primero la documentación y los ejemplos de esa misma pagina. Gracias.

Quicktime Embed

Documentación: Tutorial 1
Referencia a los atributos: Tutorial Referencia

Para poder usar este reproductor oficial, solo tienes que copiar y pegar el siguiente codigo:

<object CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="640" height="378" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="videos/video.mov">
<param name="autoplay" value="true">
<param name="bgcolor" value="#5b5b5f">
<param name="controller" value="true">
<param name="ENABLEJAVASCRIPT" value="true">
<embed type="video/quicktime" src="videos/video.mov" qtsrc="http://www.tusitio.com/videos/video.mov" width="640" height="378" autoplay="true" loop="false" controller="true" pluginspage="http://www.apple.com/quicktime/download/">
<object>

No tiene mucha complicación.
src: Hay que rellenarlo con la localización del video en vuestro servidor o en otro.
qtsrc: Hay que rellenarlo con la url completa del video en vuestro servidor o en otro.

Los param, son atributos del objeto object.. asi que normalmente menos el src, son opcionales. Busca mas info por internet. Con esto deberia servirte para hacer funcionar el reproductor de archivos apple.

FLOWPLAYER

Documentacion: Configuracion

Para poder usar este reproductor, se hace un poquito mas complicado; no usa object ni embed, usa javascript. Asi que nos tendremos que bajar los ficheros .js para hacerlo funcionar. Pero tiene una ventaja sustancial, este codigo es valido para el w3C.

Hay que meter los js en una carpeta del servidor, ej. flvplayer/


<script type='text/javascript' language='javascript' src='flvplayer/swfobject.js'></script>
<div id="flowplayerholder">

</div>

<script type="text/javascript" language='javascript'>
var fo = new SWFObject("flvplayer/flvplayer.swf", "FlowPlayer", "640", "360", "7", "#ffffff", true);
// need this next line for local testing, it's optional if your swf is on the same domain as your html page
fo.addParam("allowScriptAccess", "always");
fo.addVariable("config", "{ countryCode: 'fi', playList: [ {overlayId: 'play' }, { url: 'http://www.tusitio.com/video/video.flv' } ], initialScale: 'scale', fullScreenScriptURL: 'flvplayer/fullscreen.js', autoPlay:false }");
fo.write("flowplayerholder");

</script>

Copiar y pegar en el lugar donde se quiera. Y a funcionar. No voy a explicar los addVariable, que para eso esta la documentación oficial de la pagina.

Bueno, y hasta aqui es todo.
Espero que alguien se beneficie de mi experiencia.

Bye.

Filed under: zona seria   |  2 Comments
Tags: embed, flash player mov, mov, quicktime emded, quicktime flash video, quicktime web video, video