You are on page 1of 25

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 1



ADMINISTRACIN DE WEBSITES CON CMS
PARTE II
Leccin 12 Como agregar videos al contenido








Administracin de un WebSite con CMS se encuentra bajo una Licencia Creative Commons Atribucin-
No Comercial-Licenciamiento Recproco 3.0 Unported. Sep 2012 Ago 2014 IDSystems
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 2


04 COMO AGREGAR VIDEOS AL CONTENIDO

En nuestro contenido tambien podemos agregar videos a cada una de nuestras publicaciones. Hay
varias maneras de hacerlo dependiendo del tipo de archivo que se trate.

Tipos de video y consideraciones

En primer lugar, al igual que con las imgenes, tenemos que saber cuales son los formatos de video
que se pueden poner en nuestro sitio, ya que hay cientos de formatos y de codecs (algoritmos de
compresion).

FLV Flash Video. Video convertido a flash
SWF Formato de compresion y ejecucion de Flash. No
necesariamente video.
MPG (mpg-2, mpg-4) Formato de video comprimido estandar VCD.

El formato estandar de video fue llamado AVI (Archivo de Video), hace muchos aos. Sin embargo, este
formato tiene la desventaja que es muy grande (unos 5 minutos de video facilmente podrian ser
50MB). Por lo tanto se busco formas de comprimir el video con buena calidad. Hay muchos formatos.

El primero de ellos fue el MPG (que es como JPG para las imgenes), pero hay formato de REAL PLAYER
(.rm) o de QuickTime (.qt). El formato de DVD (.vob), Windows Media (.wmv) o recientemente el
formato para alta calidad (792).

Pero ninguno de estos formatos nos sirve para publicar en internet, ya que son formatos que tienen
gran tamao aun comprimidos. Ademas, todos estos formatos son para un reproductor en particular y
tienen que estar generalmente completos para verse.

El formato ideal para prensentar videos por internet es FLV o en su caso SWF. Ya que dichos formatos
basados en FLASH son streaming. Streaming significa que puede irse viendo el video mientras se esta
descargando. Esto hace que los videos de Youtube se vean poco a poco y si tenemos buenca conexin,
casi ininterrumpidamente como si se hubieran bajado completamente.

Entonces, las consideraciones generales son:

1. Tomar un video en un formato estandar como MPG (si nuestra camara de video o fotos no
tiene este formato estandar y posee uno propio, deberemos convetir primero este video a
formato estandar)
2. Si el video tiene un formato no estandar, debemos usar un programa de conversion primero
3. Usar un programa de conversion de video a formato FLASH FLV o en su caso SWF.
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 3

4. O tener una cuenta en YouTube, Vimeo o similar para subir el video, que el portal lo convierta y
luego obtener el enlace del mismo.


Insertar video en modo estandar.

En primer lugar veamos como insertamos un video de manera estandar. Nuestro portal tiene 2
editores de contenido: TinyMCE y Xstandard Lite. A estos se le puede sumar el JCE por parte del
desarrollador ya que este ultimo tiene mas opciones de edicion.

Sin embargo, este editor JCE no tiene un boton para insertar videos, asi que lo primero es asegurarnos
que editor estamos utilizando. Para ello, vamos al menu superior de nuestro panel



Y seleccionamos CONFIGURACION GLOBAL. Nos aparecera la siguiente pantalla:

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 4



De la cual debemos seleccionar el TINYMCE 2.0. Guardar los cambios e ir a nuestro articulo donde
pondremos el video. Entramos a el y veremos que nuestro editor cambio un poco con iconos
diferentes.



Debemos seleccionar el icono de film (amarillo) para insertar el medio. Se abrira la siguiente ventana:

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 5



Inmediatamente vemos que nos pregunta el TIPO de archivo de video que pondremos, el nombre o
ubicacin y las dimensiones por si queremos redimensionar. El tipo de archivo sera el determinante y
mas importante:



Aqu nos indica que podemos usar FLASH, QUICKTIME, SHOCKWAVE, WINDOWS MEDIA O REAL MEDIA.
Traducido nos quedan las extensiones (FLV, QT, SWF, WMV, RM). Despues nos pedira la ruta del
archivo y tenemos que teclearla complentamente comenzando con HTTP://
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 6

Si el archivo ya lo hemos subido a traves de nuestro cliente FTP a una de las carpetas, vamos a poner
toda la ruta como sigue:

http://www.dental.com/images/stories/videos/video05.flv

(NOTA: La direccion arriba es un ejemplo y no existe dicha direccion).

Automaticamente al pasar a los otros campos debemos ver la imagen previa del video. Si queremos
mostrar un video de YOUTUBE, debemos anotar la direccion segn la pagina:



Aqu estamos viendo la direccion que nos proporciona Youtube, automaticamente nos da el tamao y
nos da un preview del video. Lo que resta es pulsar el boton INSERTAR.

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 7



Vemos que se ha insertado un recuadro de color amarillo indicandonos la posicion del video.
Ahora grabamos y vamos a verlo en nuestro sitio.

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 8



Y asi aparece en nuestra pagina publicada y a la vista de nuestros visitantes. Aqu vemos que el video
se puede ejecutar pulsando sobre el.

** ACTUALIZACION **
Debido a los cambios tecnolgicos actuales, la plataforma de Youtube ha cambiado el formato de sus
videos de flash a HTML5. Esto, con el fin de poder ser presentados en los diferentes dispositivos
moviles. Sin embargo, la plataforma Joomla con su editor por defecto, no soporta el nuevo URL que
provee Youtube. As que si copiamos el URL que viene por defecto en Youtube, no nos mostrar ningn
video.



[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 9



Por lo tanto, para poder incrustar un video de YouTube, necesitamos seleccionar lo siguiente.
Primeramente, ir a la parte inferior del video, donde esta COMPARTIR


[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 10

Despus de ah, tenemos que seleccionar la opcin INSERTAR



Y debemos marcar la ultima casilla que indica UTILIZAR CODIGO DE INSERCION ANTIGUO



Y este codigo es el que pegaremos en la cajita de video en la pestaa de fuente, as:

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 11



Y a continuacin damos click en INSERTAR

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 12



Aparentemente no hizo nada, mas que ponernos un recuadro amarillo. Si damos un click en el botn
de insercin de media veremos lo siguiente:

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 13


Ahora si nos pone la imagen del video y el codigo antiguo en el URL. Simplemente cerramos la ventana
y grabamos nuestro artculo. Veamos el resultado

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 14



Sin embargo, esto tiene la desventaja que presentar el video en formato Flash. Que no ser apto para
dispositivos moviles como tabletas o smartphones.














[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 15

Insertar video usando el complemento ALL VIDEO RELOADER

Otra forma de insertar videos comodamente es usar el complemento ALL VIDEO RELOADER que el
desarrollador haya puesto en su sitio web. Cmo nos damos cuenta si lo tenemos? Al escribir o editar
nuestro articulo, veremos un boton en la parte inferior del mismo para insertar el video que queramos.

NOTA: Este complemento funciona para las plataformas Joomla 1.5, si su versin de plataforma es
2.5 o superior este complemento no funcionar


Editemos de nuevo nuestro articulo, vayamos hasta el final del mismo, y pulsemos el boton AVR
MEDIA. Aparecera la siguiente pantalla:

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 16



Esta es una ventana flotante que nos pregunta si insertaremos un video remoto o un video local
(grabado en el mismo lugar de nuestro servidor).

Vayamos a la pestaa de LOCAL MEDIA

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 17



Lo primero es saber el archivo de video que queremos, esto se logra dando un click en la caja de
despliegue MULTIMEDIA, ya que contendra los videos que hemos subido a la carpeta de AVR
expresamente.

Al seleccionar uno automaticamente detectara el tipo de archivo que se trate de la siguiente opcion.



Qu otros tipos de formatos soporta?

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 18



Bastantes mas que la insercion estandar. Sin embargo, los videos deben estar en la carpeta
correspondiente. Ahora solo nos falta pulsar en INSERTAR.



Y vemos que contrariamente a como se puso de manera estandar, aqu solamente nos pone un texto
para insertar el video.

Ahora queremos insertar otro video de youtube. Volvemos a pulsar el boton AVR MEDIA y
seleccionamos REMOTE MEDIA. Pondremos el enlace en la primera opcion

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 19



Y automaticamente nos identificara al proveedor, su id, tamao y pondra la etiqueta correspondiente.
Pulsamos sobre INSERT.



Y ahora vemos que nos agrego la etiqueta de youtube. Grabamos y vamos a ver como queda
publicado.

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 20



Como podemos apreciar, aunque en el primero tenemos un recuadro en nuestro editor y solo
etiquetas en los segundo y tercero, al publicar aparecen correctamente, tanto local como remoto.

Sin embargo, estos no tienen efectos como las imgenes en lightbox.
[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 21


Insertar videos con ALL VIDEOS

La nueva versin de AllVideos, soporta Joomla 2.5 y 3.x. Aunque tiene por defecto que no cuenta con
un botn para el editor. Si tenemos instalado el editor JCE, entonces si es posible que cuente con un
botn para facilitar la tarea.

Sin embargo, es posible poner los videos de una manera muy sencilla. Cuando encontremos el video
que queramos insertar, por ejemplo: https://www.youtube.com/watch?v=vTSMO7T3nSw




[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 22

Cuando vamos a la seccion de COMPARTIR, veremos en enlace:

http://youtu.be/vTSMO7T3nSw

Cuando estemos en el artculo debemos poner:

{youtube}vTSMO7T3nSw{/youtube}

Donde solamente, ponderemos el ID del video sin la direccin completa.




As, nuestro artculo queda de la manera siguiente:

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 23



Insertar video en galerias de videos

En otras ocasiones necesitamos hacer galerias de videos, es decir, una pagina donde solamente se vean
videos y el usuario pueda seleccionar que escoger. Para esto necesitamos un complementos que nos
ayude a administrar nuestros videos.

Lea la leccion 19 de la PARTE III para mas informacion.

Insertar video con efecto lightbox

Queremos que nuestro video se muestre en una caja de lightbox como en las imgenes?

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 24



Aqu necesitamos usar otro complemente llamado ROCKET.
Este complemento forma parte de uno mas extenso para mostrar tambien efectos de lightbox en las
imgenes. Sin embargo, nos concretaremos al video en esta ocasin. El primer paso es saber si lo
tenemos instalado si el desarrollador lo ha considerado asi.

[ADMINISTRACION DE SU WEBSITE CMS AVANZADO] IDSYSTEMS 2011

Leccion 12 Como agregar videos al contenido Pgina 25



Como siempre, podemos ver en el menu de EXTENSIONES, y GESTOR DE PLUGINS si tenemos instalado
este complemento.

Ahora, para usarlo, vamos al articulo donde queremos mostrar el video:



E insertamos las etiquetas correspondientes:

{rokbox title=|RocketTheme :: Del Curso de Vialidad| size=|640 400| text=|Haga Click aqui para ver
un video de lo que hacen los guardias|}images/stories/democapacita.swf{/rokbox}

Y tenemos que indicar la ruta de ubicacin en donde tenemos nuestro video. En este caso,
IMAGES/STORIES/.

You might also like