martes, 13 de abril de 2010

Reproductor multimedia JW 5.1



Jeroen Wijering está continuamente mejorando sus reproductores multimedia. Es por esto que tenemos que volver de nuevo a hablar de los mismos.
Porque siguen siendo los mejores.
A pesar de los problemas que puedan dar o de las opciones que no acaban de funcionar.



Vamos a explicar la última versión del reproductor, la 5.1, que reproduce tanto vídeo en formatos flv y mp4, como archivos de audio mp3. También vídeos de YouTube (aunque creo que no es una opción demasiado interesante pues el propio YouTube ya tiene su reproductor...)
Vamos a su web, ahora llamada longtail video:
http://www.longtailvideo.com/
Y pulsamos sobre el botón Download Now.
Llegaremos a una nueva página en la que veremos la siguiente imagen:



Por defecto están activadas las opciones:
- Mantenerme informado
- Descargar la opción Viral
Yo recomiendo desactivar esta última opción que lo que permite es, fundamentalmente, que se pueda compartir nuestro vídeo y embeberlo. Esta información la obtenemos colocando el ratón sobre el signo de interrogación:

Si desactivamos la opción, nos descargaremos un archivo mediaplayer.zip que, al descomprimirlo, contiene 6 archivos:
- El player.swf es el reproductor propiamente dicho
- El preview.jpg es la imagen que se ve antes de que el vídeo comience a rodar
- El readme.html es la página web con el vídeo de ejemplo y las explicaciones correspondientes para hacer funcionar todo
- El swfobject.js es un javascript que necesita ser subido al servidor en la misma carpeta
- El video.flv es el archivo de vídeo que se va a reproducir
- El yt.swf es otro archivo flash necesario para la reproducción de un vídeo de YouTube

Abrimos el archivo readme.html y tendremos que ver la página web con el vídeo de ejemplo reproduciéndose sin problemas.
Para ver el código que tenemos que colocar en la entrada de nuestra web o blog, pulsamos con el botón derecho del ratón sobre un punto vacío de la página y elegiremos "Ver código fuente". Allí nos encontraremos con el siguiente fragmento de código:

 
 <object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="400" height="315">
  <param name="movie" value="player.swf" />
  <param name="allowfullscreen" value="true" />
  <param name="allowscriptaccess" value="always" />
<param name="flashvars" value="file=video.flv&image=preview.jpg" />
  <embed
   type="application/x-shockwave-flash"
   id="player2"
   name="player2"
   src="player.swf" 
   width="400" 
   height="315"
   allowscriptaccess="always" 
   allowfullscreen="true"
   flashvars="file=video.flv&image=preview.jpg" 
  />
 </object>
 
 

He marcado con rojo las rutas de los archivos que tienen que ser comprobadas y en su caso modificadas.

Lo que tenemos que hacer es:

1.- Subir a nuestro servidor en una misma carpeta:
  • El reproductor player.swf
  • El archivo de vídeo, el video.flv
  • El swfobject.js
  • La imagen preview.jpg
2.- Realizar la entrada en el blog incluyendo el código en el que habremos cambiado la cadena player.swf (en los dos sitios) por la ruta absoluta (http://...) en la que se encuentre el reproductor una vez alojado.
3.- Como el archivo video.flv estará en la misma carpeta, no hará falta escribir la ruta absoluta.
4.- Lo que si que será, probablemente necesario, será sustituir la ruta relativa de la imagen preview.jpg por la ruta absoluta.
5.- Finalmente comprobar los tamaños width y height de nuesto vídeo (que tiene que ser también el tamaño en ancho y alto de la preview.jpg y modificarlo en el código del embebido (las dos veces).
Con esto el reproductor del vídeo debería de funcionar:



En la entrada anterior he empleado el reproductor Viral.
Puedes comprobar las diferencias y ver que el embebido no funciona...
Por esto recomiendo la descarga del reproductor sencillo.
Vídeo obtenido de la Agencia Atlas.

Ampliación ( 15/04/2010)

Efectivamente, si en lugar de colocar la ruta del vídeo flv, colocamos la ruta del archivo de audio mp3, el reproductor se reconvierte sin problema. Claro, las medidas de width y height hay que modificarlas. En este caso lo hemos puesto a 200 x 22 píxeles.


"Silbo del dale" de Miguel Hernández musicado y cantado por Joan Manuel Serrat

Probamos también la reproducción de un vídeo de YouTube. Simplemente, en file hemos puesto la URL del vídeo en Youtube. En este caso: http://www.youtube.com/watch?v=siOHh0uzcuY Hemos añadido también la imagen inicial. Para que se viera esta imagen previa, hemos tenido que colocar la URL absoluta.

Lástima que se pierdan los subtítulos que ayudan a entender lo que se está diciendo a los que nos cuesta esto del inglés...

9 comentarios:

Isidro dijo...

Hola Ángel, gracias por el análisis que realizas y que nos pone al día de las novedades. Este reproductor es muy interesante.
Saludos

angelpuente dijo...

Gracias Isidro por pasarte por aquí y tomarte la molestia de escribir un comentario.
A ver si tengo un rato y completo un poco la entrada con el reproductor de audio y alguna de las otras opciones...

Unknown dijo...

Hola Angel, oye necesito saber si alguna vez has tenido o has usado el comunicarte con el objeto para saber su estatus ... Veras lo que quiero hacer es una ventana modal y que al termino del video se cierre esta ventana...

angelpuente dijo...

Para fenix:
Aquí tienes dos tutoriales.

http://ciudadblogger.com/2009/05/abrir-videos-en-ventana-emergente.html

http://tutorialesparablogspot.com/2010/01/ver-video-youtube-en-ventana-emergente.html

Lo de la ventana emergente funciona... pero lo que no funciona es el cerrado de la misma cuando el vídeo acaba.

Unknown dijo...

Angel, muchas gracias por tus links.... Ayer mismo solucione ese problema del cerrado automatico y de la ventana modal, pero de todas maneras gracias por tu pronta respuesta.

Saludos...

goge dijo...

hola por casualidad he entrado en tu blog desearia me dijeras como puedo poner el mapa de recent visitors ya que yo lo tenia en mi blog pero lo perdi y no se como ponerlo ya que no se ingles te agradeceria me comentaras muchas gracias

goge dijo...

hola ya arregle mi problema saludos

Anónimo dijo...

Hola amigo, muy bueno este tutorial.
Yo puedo hacer funcionar este reproductor en mi pagina, pero tengo un problema. Cuando tengo un archivo de 1mb o menos funciona todo bien, pero cuando es mas pesado el archivo Ej: 3mb,nunca termina de cargar y no inicia el archivo.
Espero que me puedas ayudar con este problema, muchas gracias!!

Anónimo dijo...

Hola amigo, muy bueno este tutorial.
Yo puedo hacer funcionar este reproductor en mi pagina, pero tengo un problema. Cuando tengo un archivo de 1mb o menos funciona todo bien, pero cuando es mas pesado el archivo Ej: 3mb,nunca termina de cargar y no inicia el archivo.
Espero que me puedas ayudar con este problema, muchas gracias!!

Related Posts Plugin for WordPress, Blogger...