Permitir que los usuarios incluyan vídeos de Youtube en nodos y comentarios
Existen varias formas para permitir que los usuarios puedan incluir vídeos de Youtube, la más fácil sería habilitarles los tags html (en la configuración de los formatos de entrada) para que los usuarios puedan copiar y pegar el código embed proporcionado por Youtube.
Este método no es recomendado porque traerá problemas de seguridad.
El método que mostraremos en este artículo será definir un tag especial para que los usuarios puedan incluir vídeos de Youtube en nodos y comentarios.
El usuario podra incluir un vídeo de Youtube ingresando la url del mismo entre los tags youtube, como se muestra a continuación:
[youtube]http://www.youtube.com/watch?v=AJvabW2Hj2U[/youtube]Drupal convertirá este código en el vídeo embebido:
O también en una imagen preliminar del vídeo (proporcionada por Youtube) enlazada con el vídeo en Youtube:
Este último caso es útil si los usuarios se quejan que la carga del flash les trae problemas con el navegador.
Para ello utilizaremos el modulo Custom Filter, el cual se encargará de convertir los tags youtube en el vídeo embebido o la imagen preliminar enlazada.
También podremos incluir un botón en nuestro editor para que el usuario no tenga que lidiar con tags y solo introduzca la url del video. En nuestro caso agregaremos un botón a BUEditor que solicita la url y escribe los tags.
1. Custom Filter.
Este módulo lo descargamos e instalamos en sites/all/modules como cualquier otro módulo contrib, luego lo habilitamos en la administración de módulos.
Ingresamos a la administración de Custom Filter (admin/settings/customfilter) e importamos el filtro que convierte los tags youtube en el video embebido o la imagen preliminar.
Importar solo un filtro de los dos que publico aquí, según se quiera ver o el vídeo embebido o la imagen preliminar, pero no los dos juntos.
Filtro para vídeo embebido:
Copiar el siguiente código a un archivo e importarlo.
<?xml version="1.0" standalone="yes"?>
<customfilter>
<filterset name="videos filter" cache="1">
<description></description>
<tips>
<short><![CDATA[]]></short>
<long><![CDATA[]]></long>
</tips>
<filters>
<filter name="youtube" matches="0" func="0" weight="0">
<description><![CDATA[]]></description>
<pattern><![CDATA[/\[youtube\]http:\/\/[a-z]*\.?youtube\.com\/watch\?v=([a-zA-Z0-9\-_]+).*\[\/youtube\]/]]></pattern>
<replacement><![CDATA[<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/$1&hl=es&rel=0&color1=0x006699&color2=0x54abd6&border=1"></param><embed src="http://www.youtube.com/v/$1&hl=es&rel=0&color1=0x006699&color2=0x54abd6&border=1" type="application/x-shockwave-flash" width="425" height="349"></embed></object>]]></replacement>
</filter>
</filters>
</filterset>
</customfilter>Filtro para imagen preliminar:
Copiar el siguiente código a un archivo e importarlo.
<?xml version="1.0" standalone="yes"?>
<customfilter>
<filterset name="videos filter" cache="1">
<description></description>
<tips>
<short><![CDATA[]]></short>
<long><![CDATA[Puedes agregar un video de Youtube encerrando la url del mismo entre los tags [youtube] y [/youtube]]]></long>
</tips>
<filters>
<filter name="youtube" matches="0" func="0" weight="0">
<description><![CDATA[]]></description>
<pattern><([a-zA-Z0-9\-_]+).*\[\/youtube\]/]]></pattern>
<replacement><![CDATA[<a href="$1$2" target="_blank"><img src="http://img.youtube.com/vi/$2/default.jpg"></a>]]></replacement>
</filter>
</filters>
</filterset>
</customfilter>Para los que quieran saber más sobre Custom Filter, aquí pueden leer la documentación de Custom Filter en ingles.
Básicamente lo que hace Custom Filter es buscar en el contenido del nodo o comentario las coincidencias con una expresión regular PCRE y reemplazarlas por una cadena.
En nuestro caso le damos una expresión regular que representa la url del vídeo entre los tags youtube y reemplaza las concindencias por el código embed o una imagen que enlaza al vídeo.
Una vez que importamos el filtro, habrá que ir a la administración de los Formatos de entrada (admin/settings/filters), ingresar a configurar en nuestro Formato de entrada predeterminado (Filtered HTML por lo general) y habilitar el filtro videos filter.
Con esto ingresando la url del vídeo entre los tags youtube tendría que convertirse según el filtro que importamos.
Ahora nos falta facilitarle al usuario el ingreso de los vídeos a través de un botón en el editor HTML, veremos solo el caso de BUEditor.
2. BUEditor.
Se supone que ya tenemos el editor BUEditor funcionando y ya sabemos básicamente como se configura.
Para facilitarle la vida a los usuarios, agregaremos un botón en BUEditor que al presionarlo salga una ventana donde el usuario ingrese la url del vídeo, y al presionar OK este ingrese al formulario la url dentro de los tags youtube.
Ingresamos a la administración de BUEditor (admin/settings/bueditor) y editamos nuestro editor.
Agregamos el nuevo botón ingresando:
Titulo:
Insertar video de YoutubeContenido:
js:
editor.getUserInput = function(form) {
editor.active.replaceSelection('[youtube]' + form.elements["url"].value + '[/youtube]');
editor.dialog.close();//close the dialog when done.
}
var userForm = '<form onsubmit="editor.getUserInput(this); return false;">';
userForm += 'URL : <input type="text" name="url" />';
userForm += '<input type="submit" value="Enviar" /></form>';
userForm += '<br/ >Copia la dirección del video<br />Ej: http://www.youtube.com/watch?v=XXXXXXX';
editor.dialog.open('Insertar video de Youtube', userForm);
Seleccionamos una imagen y el peso del boton y presionamos Guardar.
Fin.
- blog de Ariel
- Inicie sesión o regístrese para enviar comentarios
- 1496 lecturas
Hola Ariel,
Yo utilizo el módulo "video" que permite poner vídeos de youtube, google videos... con la etiqueta
[video:url]Estoy bastante contento con él.Saludos
Hola Ariel,
Yo utilizo el módulo "video" que permite poner vídeos de youtube, google videos... con la etiqueta
[video:url]Estoy bastante contento con él.Saludos
Gracias por el dato!
Hay muchas formas de habilitar los videos embebidos, cada uno tendrá que elegir el mejor metodo según la version de Drupal, funcionalidades deseadas, etc.
Muchas gracias hice un remix con el módulo video_filter y cree el botón del bueditor y quedó perfecto.
Gracias por el aporte. Ahora ya puedo presentar videos en mi web!!
this is really a nice website and i found some useful and informative material on it.
I have developed a useful link, ccie notes provides you with some interesting information that can be beneficial to you, and you can avail a lot. Please have a look at it.
Thanks