La mejor manera de insertar videos en un blog Wordpress (Flash media player+wordtube+blip.tv) - Parte 1
WordPress database error: [Unknown column 'XX' in 'where clause']
SELECT * FROM wp_wordtube WHERE vid = XX
Ja, pequeño título…
En fin, si sos un tanguero que extravió el rumbo, y en realidad querés leer acerca de tu baile preferido, seguí por aqui: www.tangoscopio.com. Pasó que no me aguanté y me tuve que zarpar con algo de informática en este blog.
Ahora si entraste para leer acerca un muy buen método (el mejor en mi opinión) para insertar vídeos en tu blog wordpress, seguí leyendo.
El artículo es largo, pero es a causa de mi maldita obsesividad en los detalles, al margen que lo intenté hacer facil de seguir paso a paso.
El método se basa en subir un vídeo a blip.tv e insertarlo en el blog por medio del plugin wordtube. Antes de entrar de lleno en el procedimiento, veamos las ventajas de hacerlo de esta forma.
¿Por que almacenar los vídeos en un sitio externo?
Hablamos de un sitio del estilo Youtube, Metacafe, o por supuesto, blip.tv. Hostear nuestros videos en ellos nos permite:
- Ahorrar espacio en disco de nuestro hosting
- Ahorrar ancho de banda de nuestro hosting
- Al ser sitios con mucho con muchos visitantes que realizan todo tipo de busquedas, nuestros vídeos publicados ahi pueden originar tráfico hacia nuestro sitio.
¿Por que blip.tv?
Luego de subir unos vídeos a Youtube, me di cuenta que tenían problemas en la sincronización del audio y la imagen.Eran vídeos comprimidos con el virtualdub en formato xvid. Probé subirlos varias veces y el problema persistió. Podés ver un ejemplo aqui (fijate como el solo del baterista se ve antes de que se oye ). En todo caso, eso me decidió a buscar un nuevo lugar donde subir mis vídeos. Luego de probar muchos (las mejores opciones gratuitas al menos), me decidí por blip.tv. Tiene las siguientes ventajas, entre otras:
- Conserva el video original que subiste. La mayoria (o todos) de los otros sitios convierten tu video a flash y esa es la que se guarda. Aqui tenés tu video original y la versión de flash
- Muy buena calidad de imagen. Creo que en blip.tv los videos se ven en mejor calidad que en youtube.
- De ser necesario, podés podés mostrar el video en el formato original, en vez de en el formato de flash (flv).
- Un soporte técnico excelente. Todas las preguntas que les hice, fueron contestadas velozmente, a veces en cuestión de horas.
- Ganar dinero incluyendo hasta tres tipos de publicidad (o ninguna, si no te interesa). Los tipos de publicidad van de mayor a menor, en cuanto a efectividad e intrusividad. Vos elegís cual te conviene.
- Te permite elegir la imagen previa o thumbnail de tu video. Podés quedarte con el que puso blip.tv, o subir tu propia imagen.
- Fundamental: blip.tv es uno de los pocos que te permite linkear directamente al archivo del video, ya sea el original o el flash. Esta es quizá la característica principal, ya que es lo que permite usarlo de la manera que voy a explicar más adelante.
¿Por que wordtube?
Ninguno de los reproductores de los sitios para subir videos me parecía muy bueno ni suficientemente configurable, al margen que tenían problemas de validación. Por otro lado, había plugins de wordpress para insertar distintos tipos de vídeo, pero no los de blip.tv. Fue entonces cuando encontré la combinación Flash Media Player + Wordtube. Estas razones me llevaron a elegirla como mi preferida:
- Mucha mas cantidad de opciones de configuración, tanto en funcionamiento (pantalla completa, autostart) como estética (colores y demás). Muy importante si sos cuidadoso con el diseño.
- A pesar de sus multiples opciones, facilidad de uso. A veces simplemente insertar un tag.
- Posibilidad de administrar todos los vídeos del blog desde un solo lugar. Mucho mejor que tener que entrar a los post uno por uno.
- Con una pequeñísima modificación, valida incluso xhtml. Es muy molesto que te hayas preocupado por los estándares en tu sitio y un player te lo arruine.
- En español, gracias a Felipe Lavín de Yukei.net.
- Algo genial: Permite insertar ya sea un vídeo solo o una lista de vídeos, que se ven todos en el mismo reproductor. Esto es muy comodo, ya que permite ahorrar mucho espacio, evitando tener que escrolear, como pasa cuando son más de tres vídeos.
¿Querés ver un ejemplo de una lista de reproducción? Aqui lo tenés, con más de 15 videos. Calculá el espacio que necesitarias si fueran 15 videos de youtube, uno abajo del otro:
Get the Flash Player to see the wordTube Media Player.
Y acá a la derecha tenés una muestra de la página de opciones para configurar el reproductor. Al margen de estas opciones, estás las particulares para cada video, y la de las listas de reproducción. Pero no te preocupés si tanta configuración te marea, en realidad podés usarlo sin tener que cambiar ninguna de estas opciones, así esto lejos de ser un defecto es una ventaja. Nunca está de más tener la posibilidad configurar adecuadamente lo que usamos.
Y ahora, basta de introducción.
Si la tenés clara y pensás que un tutorial paso a paso es muy “lame” para vos, acá tenés un resumen:
- Instalá el plugin wordtube.
- Sacá una cuenta en blip.tv.
- Subí tu vídeo a blip.tv
- Copiá la URL del archivo .flv y la de la vista previa .jpg del vídeo que subiste.
- Subí tu video al Media Center de Wordtube, linkeando a las URL del vídeo
- Inserta tu vídeo en tu post.
Ahora, si en cambio preferís más detalles, aquí están:
Ingredientes:
Para realizar lo que aquí te explico vas a necesitar:
- Obviamente, un blog Wordpress (no de wordpress.com a menos que puedas agregarle plugins)
- Una cuenta en blip.tv (opcional, pero recomendada)
- El plugin wordtube de Alex que podés encontrar descargar de aqui.
- Si querés el wordtube en castellano, bajá la traducción de Felipe Lavín de aqui.
- El reproductor Flash Media Player que podés descargar de aqui.
Todos estos elementos son gratuitos, al menos, como en el caso del Flash Media Player, para uso personal.
Preparación preliminar:
Antes que nada, una aclaración: Se puede usar Wordtube sin blip.tv, es decir hosteando vos mismo tus vídeos. Para ello tendrías que convertir tus vídeos a formato FLV y subirlos a la red. En ese caso, ignorá lo que hablo acerca de blip.tv (sin embargo, debo decir que me parece más práctico usarlo).
Antes de empezar a usar todos estos elementos hay que instalar el plugin Wordtube. Hago una traducción de lo que aparece en su página oficial:
“Descomprimir y subir el directorio dentro del directorio de plugins. Nota: No cambies los nombres de la carpeta (ver imagen a la izquierda). También vas a necesitar el reproductor Flash Media Player de Jeroen Wijering (gratis para uso personal). Descargá el reproducros de su sitio y subilo (solo el archivo mediaplayer.swf) al directorio de wordtube (si querés el ecualizador entonces descargá el Flash MP3 Player). Ahora podés activar el plugin.
Nota: Asegurate de tener lo siguiente en tu plantilla (o template)! Está en el index.php de la plantilla original, pero si la creaste vos, tal vez te olvidaste de incluirlo:
<?php wp_head(); ?>Esa linea iria entre los tags <HEAD> </HEAD>.
Y, agrego yo, si querés el wordtube en castellano, descomprimí el archivo que te indique más arriba, en el directorio de wordtube.
Lo próximo que tendrias que hacer es registrarte en blip.tv, lo cual no tiene ninguna complicación y es gratis.
Lo primero: subir tu vídeo a Blip.tv
Como ya dije, podés obviar este paso si no vas a usar blip.tv como hosting.
Para subir un vídeo a blip.tv, clickeá en Upload, y te vas a encontrar con una página como esta (click para agrandar):
Te recomiendo llenar con la suficiente información como para que tu vídeo aparezca con la mayor frecuencia posible en las búsquedas.
Una vez subido el vídeo andá al “Dashboard”. Ahí vas a ver tu video en la lista de abajo a la derecha:
Hace click en el link que dice “Share” a la derecha de tu video. Se va a abrir una ventana, en la cual tenés que elegir la pestaña “Permalinks”. En esa pestaña te van a aparecer varias direcciones URL. Algunas de ellas las necesitamos para lo que viene después. Seleccioná y copiá la que está abajo de “web - Flash Video (.flv)”. Esa es la dirección al vídeo en formato flash:
Luego, selecciona la dirección siguiente, la que está debajo de “The thumbnail for this post can be accessed directly at the following URL”. Esa es la dirección a la imagen que va a servir de vista previa.
Ingresar tu vídeo a Wordtube
Wordtube crea una sección en wordpress desde donde tenemos listados todos nuestros vídeos, y la cual nos permite subir mas vídeos, y hacer listas de reproducción.
(Nota: para la explicación, voy a usar la traducción en castellano de Wordtube)
Para entrar a la sección hace click en “Administrar” y luego “Media Center”. Ahi vas a tener un link que se llama “Insertar nuevo archivo”, que te va a llevar a una pantalla como la que sigue:
Completar este formulario no tiene mucha ciencia: En título/nombre y creador va lo que vos te imaginás, y en tamaño podés cambiar las medidas si tu video es mas grande o mas chico.
Desde ahí el camino si bifurca: Podés elegir subir un video del mismo modo que adjuntas archivos en el correo, pero como verás en la imagen, los hosting suelen dar poco espacio para subir archivos por medio de php (no hago nada con 2 megas).
La otra opción es pegar la primera dirección de blip.tv que copiaste antes (la que termina con .flv) en donde dice “URL del archivo”, y pegar la segunda (la terminada en .jpg) en donde dice “URL de la miniatura (.jpg)”. Luego le dás click al botón “Agregar archivo” y listo. (Como imaginarás, también podés pegar otras URL que no sean de blip.tv, siempre y cuando sean tipos de archivos que puedas ser reproducidos por el Flash Media Player)
Insertar el vídeo en tu post:
Para esto tenés dos métodos, uno mas simple que el otro:
Podés escribir en el editor [MEDIA=XX] donde xx es el id del vídeo, que es un número que podés ver en el Media Center (que está dentro de “Administrar”), a la izquierda del título del vídeo.
La otra es usar el icono de wordtube que aparece en el editor cuando está en modo WYSIWYG (el comúnmente utilizado):
Basta con elegir el archivo y clickear en “Insertar Reproductor”.
Pero… ¡Quiero más!
La verdad que este post se hizo bastante largo, así que por tiempo y practicidad decidí “splitearlo”. En el próximo (no va a tardar mucho en venir, ya está casi completado) voy a mostrar como hacer listas de reproducción y que el wordtube valide xhtml (es un cambio menor), y tal vez alguna cosita más.
Actualización: Pueden encontrar la segunda parte de este tutorial aquí.
8 Comentarios
RSS feed para los comentarios de esta entrada. TrackBack URI
La mejor manera de insertar vídeos en un blog Wordpress…
Tutorial paso a paso sobre como usar wordtube y blip.tv para insertar vídeos en un blog Wordpress. Muchísimas opciones de configuración y de estética, administración de los vídeos centralizada y la posibilidad de visualizar múltiples vídeos e…
Retroenlace por meneame.net
— Junio 11, 2007 #
[...] llegó nomás la segunda parte del tutorial. La primera podés encontrarla aquí. Por cualquier cosa, aquí tenés un somero resumen de los pasos anteriores a lo que vamos a [...]
Pingback por La mejor manera de insertar videos en un blog Wordpress (Flash media player+wordtube+blip.tv) - Parte 2 | TangoScopio
— Junio 20, 2007 #
Excelente par de tutoriales sobre el uso de WordTube para insertar vídeos de Blip.tv en WordPress. Los he citado en una entrada de mi blog que acabo de publicar:
http://www.labitacoradeltigre.com/2007/07/05/clientes-para-blogs-en-el-segundo-encuentro-de-edublogs
No obstante, creo que hay un problema con el plugin WordPress a la hora de crear las fuentes RSS. Tanto en tu fuente como en la mía (http://www.labitacoradeltigre.com/feed), se produce un error de validación RSS, por la ausencia del atributo “length” en la etiqueta “enclosure”. Puedes comprobarlo con el Feed Validator.
Comentario por Eduardo Larequi
— Julio 8, 2007 #
no me funcional el plugin en explorer solo en mozilla
me sale un error.
INTERNET no puede abrir el sitio
operación anulada
Comentario por mosses
— Julio 13, 2007 #
Eduardo: ahora que lo decís, veo ese problema. Sin embargo, hay un tema. ¿Como hacés para darle el tamaño a un archivo guardado en otro sitio, del cual estás haciendo streaming? Obviamente, podrías entrarlo manualmente, pero no sería particularmente cómodo. Basicamente, en ese caso, me parece que no es un error, simplemente no hay una salida elegante.
Mosses: La verdad, sin mas datos, tengo muy poca idea de que puede estar pasando. Te diría que es muy improbable que wordtube cause este problema, pero nunca se sabe. Si podés hacer algun blog de prueba para que vea el error, tal vez te pueda dar una mano.
Saludos
Comentario por Tanguillo
— Julio 16, 2007 #
Antes de nada, darte la enhorabuena por este gran tutorial que has preparado.
Me ha servido para poder colgar video en el blog que estoy preparando. De momento lo he conseguido.
Mi pregunta es la siguiente, deseo insertar mi logo para que se muestre en la parte superior derecha de la reproducción.
Se que en opciones de Wordpress, nos da la posibilidad de señalar:
Mostrar logo
Y agregar:
URL de tu watermark (PNG, JPG)
Cuando dice URL, no se a que ruta se refiere, si es desde la dirección completa donde esta alojado el “Logo”. Pero en el servidor??
Cual seria un ejemplo de esta ruta…
/wp-content/uploads
/uploads/ejemplo_logo.png
/domains/midominio.com/public_html/wp-content/uploads/ejemplo_logo.png
Y por ultimo, tengo que darle al logo un tamaño determinado??
En fin, espero no ser pesado, pero soy incapaz de colocar mi logo en la reproducción.
Muchas gracias desde España.
Comentario por Manuel
— Marzo 10, 2008 #
La verdad es que no estoy muy seguro donde esta esa opción de la que hablás, nunca la usé, pero si lo que te pide es la URL, entonces se refiere a la dirección de internet: http://www.misitio,com/uploads/ejemplo_logo.png
Respecto al tamaño no estoy seguro, probablemente el tamaño con el que querés que aparezca en el video.
Saludos!
Comentario por Tanguillo
— Marzo 14, 2008 #
[...] WHERE pid = XX Y llegó nomás la segunda parte del tutorial. La primera podés encontrarla aquí. Por cualquier cosa, aquí tenés un somero resumen de los pasos anteriores a lo que vamos a [...]
Pingback por La mejor manera de insertar videos en un blog Wordpress (Flash media player+wordtube+blip.tv) - Parte 2 » TangoScopio
— Mayo 12, 2008 #