Ejemplo
Esto es sustituido por el javascript con el video
Incrustarlo en una página web
Descargar el archivo mpw.zip de
aquí mismo. Esto es un reproductor flash, MPW. Puede encontrarse más información en
la web de GSPlayer, que es de donde sale el proyecto.
El archivo mpw.zip debe descomprimirse dentro de una carpeta repr/ en el alojamiento de la página web (en realidad puede guardarse donde se quiera, pero a partir de ahora se tratará la instalación como si se hubiera descomprimido el fichero en el directorio repr/)
Ahora que ya tenemos el reproductor, para incrustarlo en la web debemos hacer que el programa del reproductor sea llamado por la web en la cabecera, y luego añadir el código del reproductor donde queramos ponerlo. Vamos a ello...
En el template de la cabecera (en ocasiones, según el gestor de contenidos de la web, es un único archivo para todas las páginas web), o en el archivo de la página en cuestión en la que queremos incrustar el video, dentro de la seccion <head> </head>, añadir este código:
<script src="repr/includes/swfobject.js" type="text/javascript"></script>
Luego, en la propia página, en el lugar en el que se quiera incrustar el video, poner este otro código:
<div id="flvplayer">Este div es sustituido por el video con javascript</div>
<script type="text/javascript">
// Esto carga el reproductor (pero no el video); 400 es el ancho, 327 el alto:
var so = new SWFObject("repr/mpw_player.swf", "swfplayer", "400", "327", "9", "#000000");
// Esto carga el video:
so.addVariable("flv", "repr/Clinicas.flv");
//Esto es para permitir pantalla completa. Si no se quiere, poner false:
so.addParam("allowFullScreen","true");
//Esto tiene que ser el nombre del div id que se va a sustituir:
so.write("flvplayer");
</script>
El video en si es el archivo Clinicas.flv, que como se ve está dentro de la carpeta repr/, la misma en la que hemos metido los archivos que venian de mpw.zip.
Por lo tanto, si queremos incrustar otro video, solo tendremos que meterlo en la carpeta repr/ y luego añadir los codigos anteriores en sus respectivos lugares, y modificar la variable so.addVariable("flv", "repr/Clinicas.flv"); cambiando el nombre Clinicas.flv por el que sea.
Los videos, para Flash, en principio deben ser todos FLV. De hecho, aunque el reproductor pudiera reproducir MPG u otro tipo de ficheros de video, cargarcargaríniacute;an mucho el sistema, el navegador - sobretodo en ordenadores lentos - y el ancho de banda - sobretodo en conexiones lentas -, así que deben ser FLV.
Así pues, si tenemos un video MPG, deberemos pasarlo a FLV, por ejemplo con Macromedia Flash Player, pero Flash Player tiene una licencia de pago. Podemos usar, en Windows,
Riva FLV Encoder. En Linux, podemos usar
Avidemux. En Machintosh, usaremos
FFMPEGX.
Por otra parte, si queremos usar un video que esté incrustado en otra parte, podemos descargarlo con la extensión Flasgot para Mozilla Firefox, por ejemplo (así obtuve el video de ejemplo de www.conlaser.com). Los videos que nosotros incrustemos también serán accesibles por ese método. Los videos que bajemos con Flasgot serán en su mayor parte FLV (en youtube por alta definición suelen ser MP4, pero los videos normales, sin alta definición, son todos FLV)
Truquillo 1: centrar el reproductor para que se vea, eso, centrado
Un ejemplo, con el mismo video de antes:
Este div se sustituye por javascript con el video
Como hacerlo:
Con el mismo código con el que llamamos al reproductor con el video, añdiremos antes la etiqueta <center>, y despues la etiqueta </center> (IMPORTANTE!!!: si ponemos la primera etiqueta, pero no ponemos la segunda, puede que todo lo que haya en la página web después del video salga centrado)
<center><div id="flvplayer">Este div se sustituye por javascript con el video</div>
<script type="text/javascript">
var so = new SWFObject("repr/mpw_player.swf", "swfplayer", "400", "327", "9", "#000000");
so.addVariable("flv", "repr/Clinicas.flv");
so.addParam("allowFullScreen","true");
so.write("flvplayer");
</script></center>
Truquillo 2: incrustar más de un video en la misma página
Si queremos meter más de un video con el reproductor MPW, debemos tener en cuenta que lo que hace el reproductor es sustituir un div (cuadro flotante) con un nombre específico. Por lo tanto, si usamos el mismo nombre de div en los dos videos, solo sustituirá el primero, y en el segundo nos dará el texto que haya dentro del div - si hay alguno -.
El código del segundo video en esta página, aunque sea el mismo video que el primero, tiene un nombre de div distinto: en lugar de div id="flvplayer", he puesto div id="flvplayer2". Tendremos que hacer que el reproductor que estamos poniendo sepa que tiene que sustituir ese div: lo haremos cambiando el codigo de la variable so.write("flvplayer"); con el nombre correcto: so.write("flvplayer2"). Y ya está, ya podemos poner tantos videos como queramos, simplemente cambiando en cada uno el nombre del div que se sustituye con el reproductor.