Tutorial: Crea tu WP Player a Pantalla completa

¿Te gustaría un player a pantalla completa para tu videoblog como este? ¿no? pues no continúes leyendo, pero si eres de los que les gustaría tener uno o regalarlo, a continuación os cuento el manual de instalación.

Un poco de história… hasta ahora no existía ningún player gratis que nos diera la posibilidad de convertir nuestros videoblogs a pantalla completa, los existentes son plataformas cerradas como Joost o pagando como vpod.tv, tenemos que dar las gracias, con palabras o una bonita donación al creador Mirco Pasqualini quién también ofrece una versión Pro con opciones vanguardistas.

A día 28 de junio de 2007 el creador a realizado un giro a su estrategia, cambiando el nombre del player a Boomenrang y parece ser que no lo ofrece para descargar, así que este tutorial es el único lugar donde lo encontrarás para descargar, espero que no sea el único, ¡copiame! 😉

Si quieres reproducir vídeos de Google o Youtube o no quieres meterte con programas de FTP, ni Editar códigos, ni que el player esté automatizado para los comentarios de tu wordpress, etc, sáltate al servicio Feedbeat donde utilizan el player con un panel de control para introducir de manera fácil y rápida tus vídeos, de google, youtube, etc.

El siguiente tutorial sólo sirve para vídeos con extensión FLV y con el CMS WordPress. Blip.tv te da soporte de archivos FLV. Este tutorial sólo ha sido probado en wordpress 2.2

Esto es lo que conseguirás tener al finalizar el tutorial:

player
No soy programador aunque si conocí ese mundo en mi infancia, he recuperado conceptos perdidos en la memoria y así presento este tutorial para crear vuestro player a pantalla completa, VideoBlog o Web TV como lo publicita el creador del player.
Aunque sea muy extenso es muy sencillo de instalar, aviso que no es como un plugin aunque seguramente en pocos días la comunidad WP lo creará o eso espero. Mientras, para los más precoces como yo podéis aventuraros a instalar esta versión casera.Empezamos:

1. Necesitamos tener WordPress instalado en tu propio servidor, es posible utilizar el player fuera de WordPress pero en este tutorial, de momento, no encontrarás el modo de hacerlo, cuando lo conozca prometo ponerlo.

2. Un programa para editar los archivos .php y otro para subirlos vía FTP a tu web:

  • Programas en Windows

Para editar, con el bloc de notas puedes apañartelas, pero si tienes un programa más especializado para la tarea, mejor, Notepad es un editor gratis muy bien equipado. Para el FTP recomiendo Filezilla es gratis y cumple con todo lo necesario.

  • Programas en MAC

Mangas Verdes nos recomienda: Smultron para editar y Cyberduck también gratis, para el FTP, aunque dice que a veces se cuelga.

Utilizar estos programas es sencillo, busca en Google o las webs de los programas donde hay documentación al respeto.

3. Descarga las 2 carpetas comprimidas con WinRar que encontrarás al final de este tutorial.

CARPETAS
·rc-custom-field-gui
Es un plugin de Joshua Sigar y nos ayudará para automatizar los archivos de vídeo e imágenes, lo he retocado para el player.

·TV
La carpeta donde está el corazón de nuestro Player.

El player teóricamente lo puedes descargar desde la web del creador pero hace varias semanas que no está disponible por mantenimiento de la web, igualmente en la web de Stream-Cast sólo hay el player no los archivos que he creador para que funcione en WordPress.

3.1 Descomprime el plugin rc-custom-field-gui, con el programa de Filezilla lo subes a la carpeta de plugins de tu wordpress, te diriges al panel de activación de plugins y activas el plugin. Automáticamente se crearan campos personalizados en tus posts, al escribir un post verás varios espacios para rellenar sólo cuando lo necesites, en este caso sólo cuando publiques un vídeo para el player, una imagen vale más que mil palabras.

campospersonalizados
Los campos creados y que tendrás que rellenar son:

  • minutos (opcional, debes poner en segundos la duración del vídeo)
  • video (Importante, es donde copiaras la url del FLV, ejemplo: http://unaweb.com/video.flv)
  • vimage (es opcional pero se recomienda poner la imagen que se usará como caratula/presentación del vídeo)
  • desc (opcional, descripción del vídeo)
  • appletv (opcional, si tienes una versión para appletv aquí es donde debes escribir el archivo)

Cuando publiques el post estos campos no se verán en WordPress, son campos escondidos, mi recomendación es publicar el vídeo como lo hacías habitualmente dentro del formulario, así tendrás tu videoblog o blog con el vídeo en pequeño y el player leerá la información de los campos escondidos y reproducirá el mismo vídeo a pantalla completa, así con un solo post publicas en los dos sitios.

3.2 Descomprime la carpeta TV donde encontrarás los siguientes archivos:

  • asset.swf (colores del player)
  • language.swf (idioma, solo existe en inglés e italiano)
  • StreamCastPlayer.swf (player)
  • comments.php (lista de comentarios de cada videopost)
  • crossdomain.xml (desconozco la función de este archivo)
  • embed.php (página que ofrece el código de tus vídeos para poenr en otras webs)
  • feedplayer.php (xml que lee los campos escondidos de los post para transmietirlos al player)
  • formulariocomentario.php (pues eso, un formulario para los comentarios)
  • headertv.php (la barra superior y donde hay tu rss)
  • index.php (donde aparece el player)
  • info.php (página que lee el player para saber cuantos comentarios tiene el vídeo, etc)
  • info_con_comments.php (si la sustituyes por info.php los comentarios te saldrán en el player)
  • settings.xml (para añadir opciones como mostrar un rss en el player)
  • style.css ( el estilo de la web)

CARPETAS

images (retoca los archivos para crear tu propio estilo)

  • -capamenu.gif (barra superior)
  • -feedicon.gif
  • -ico1.gif (icono de ayuda)
  • -ico2.gif (icono de ayuda)
  • -logotv.png
  • -logotvmini.png

js

  • interact.js (controla el tamaño del navegador para adaptar el player)
  • prototype.js

4. Si todo está bien hecho y yo no me he dejado nada en el tintero sólo necesitarás editar 3 archivos:
El feedplayer.php, crossdomain.xml y headertv.php.

Cuando publicas vídeos necesitas publicarlos en una categoría que crearás en WordPress, por ejemplo: Videoblog, en el panel de WordPress en la sección «Administrar» en la pestaña «Categorías» verás todas las categorías con un ID el primer número que aparece antes del nombre. Mira el ID de la categoría Videoblog y apuntalo dentro del archivo feedplayer.php en la línea 14 variable ‘cat’ donde hay un comentario al respecto.

linea14

El player leerá esa categoría y las subcategorías que tenga, importante no tener ningún post sin vídeo o te saldrá negro. (recuerda que aunque ahora ya tengas vídeos en la categoría, necesitas rellenar post por post los campos personalizados que hemos instalado con el plugin anterior)

Si tus vídeos son cuadrados, visita la linea 37 y donde dice size=»1.9″ lo sustituyes por 1.3 si son panorámicos dejalo como está.

Te recomiendo poner el nombre de tu Videoblog, etc, en las secciones correspondientes por encima de la linea 14.

Ahora guarda el archivo y abre el crossdomain.xml donde dice tuweb.com lo sustituyes por tu web, este archivo no se si es necesario pero mejor hacerlo.

En el archivo headertv.php sustituye los LINKS por los que tu prefieras, y define el contacto y rss para la suscripción.

Te recomiendo visitar la carpeta de imágenes y modificarlas con tu estilo y logo.
tvlogojoanplanastv

5. Subes vía FTP en la raíz de tu wordpress la carpeta TV y listo, con esto y unos vídeos ya tenemos nuestra pantalla completa, prueba en www.tudominio.com/tv/ y… ¡Felicidades!

Resumen para publicar un vídeo:
1- Escribes un post, rellenas el post con el vídeo para publicarlo en el wordpress de toda la vida, a continuación rellenas los campos personalizados que hemos añadido, publicamos y.. ya está, así de sencillo, publicar a pantalla completa sólo requiere rellenar unos campos personalizados, disfrutalo 😉

Espero que funcione bien, te recomiendo visitar la sección de soporte del player.

ACTUALIZACIÓN: Roberto Avalos ha descodificado los archivos para poder modificarlos a nuestro gusto ¡Gracias Roberto! He añadido los archivos al final del post, es el que empieza con el nombre «Original».

Si alguien encuentra errores o mejores ideas para el player será un placer recibir sus mensajes.

Si te ha gustado, o te ha sido útil el tutorial podrías invitarme a un refresco para seguir publicando ideas frescas 😉

Un fuerte abrazo!!

Archivos para descargar:Versión 1.60

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando entendemos que se acepta nuestra política de cookies. ACEPTAR

Aviso de cookies