Utilització del vídeo en pàgines web

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

http://www.sandiegozoo.org/zoo/ex_polar_bear_plunge.html

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

1.- Videos YouTube

- Es la forma más fácil de subir y visualizar videos en una página web.

- No se necesita tener el video en la máquina host.

- Contenido con copyright utilizado sin permiso no es permitido.

- Hay que tener una cuenta en YouTube.

- Subir un video en YouTube puede tardar muchos minutos, pero luego al cargar la página web, este se cargará de inmediato.

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

1.- Videos YouTube

1) Ir a www.youtube.com

2) Crear una cuenta si no se tiene.

3) Si se tiene, hacer click en el botón amarillo “Upload” en la esquina superior derecha de la página de inicio.

4) Especificar los detalles requeridos: título, descripción, categoría, etc.

5) Hacer click en “Continue”

6) Buscar el video que se quiere subir.

7) Seleccionar la opción embed en la página.

8) Una vez que se ha subido, aparece un código HTML que debe ser copiado y pegado en la página web.

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

1.- Videos YouTube

<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/kdckMCWa94Q"> </param> <embed src="http://www.youtube.com/v/kdckMCWa94Q" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object>

<object width="425" height="350"> Se usa para incluir imagenes, audio, videos, applets y animaciones en Flash.

<param name="movie" value="http://www.youtube.com/v/kdckMCWa94Q"></param> Provee datos de inicialización en el momento de ejecución – Internet Explorer.

<embed src="http://www.youtube.com/v/kdckMCWa94Q" type="application/x-shockwave-flash" width="425" height="350"> </embed>

Provee datos de inicialización en el momento de ejecución – Mozilla.

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

2.- Videos .AVI (Audio Video Interleave)

1) El video estará en el servidor web. La primera vez que se cargue la página, el tiempo de descarga del video dependerá de su tamaño: MAYOR TAMAÑO = MÁS TIEMPO DE DESCARGA.

<object data=“VIDEO.avi" type="video/x-msvideo" width="320" height="255"> <param name="src" value=“VIDEO.avi"> <param name="autoStart" value="0"> alt : <a href=“VIDEO.avi">PRUEBA.avi</a>

</object>

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

3.- Videos .MOV (formato de QUICKTIME)

1) El video estará en el servidor web. La primera vez que se cargue la página, el tiempo de descarga del video dependerá de su tamaño: MAYOR TAMAÑO = MÁS TIEMPO DE DESCARGA.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height="255"> <param name="src" value=" VIDEO.mov " > <param name="controller" value="true" > <param name="autoplay" value="false">

<!– ESTA PARTE ES PARA MOZILLA --><object type="video/quicktime" data=“VIDEO.mov" width="320" height="255"> <param name="controller" value="true" > <param name="autoplay" value="false"> alt : <a href=“VIDEO.mov">test.mov</a> </object>

</object>

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

4.- Videos .WMV (formato de Windows Media Player)

1) El video estará en el servidor web. La primera vez que se cargue la página, el tiempo de descarga del video dependerá de su tamaño: MAYOR TAMAÑO = MÁS TIEMPO DE DESCARGA.

<object type="video/x-ms-wmv" data="data/test.wmv" width="320" height="255">

<param name="src" value=“VIDEO.wmv"> <param name="autoStart" value="0">

alt : <a href=“VIDEO.wmv">test.wmv</a>

</object>

Si en FIREFOX no funciona, hay que descargar el plugin desde:

http://port25.technet.com/pages/windows-media-player-firefox-plugin-download.aspx

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

5.- Videos .SWF/.FLV (formato de FLASH)

1) El video estará en el servidor web, pero es el más recomendado.

<OBJECT ID="MediaPlayer" WIDTH="192" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject"> <PARAM NAME="FileName" VALUE="video1.wmv"> <PARAM name="ShowControls" VALUE="true"> <param name="ShowStatusBar" value="false"> <PARAM name="ShowDisplay" VALUE="false"> <PARAM name="autostart" VALUE="false"> <EMBED TYPE="application/x-mplayer2" SRC="video1.wmv" NAME="MediaPlayer" WIDTH="192" HEIGHT="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </EMBED>

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

<OBJECT>

data = nombre del video

type =

application/x-shockwave-flash (youtube, flash)

video/x-msvideo (avi)

video/quicktime (mov, ram – MOZILLA)

application/x-oleobject (wmv – IE)

pplication/x-mplayer2 (wmv – MOZILLA)

classid = identificador del plugin a utilizar por IE.

clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B (mov)

clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B (ram)

CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95 (wmv)

clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 (flash)

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

<OBJECT>

codebase = Es usado como ruta base para resolver URIs relativas en los valores de los atributos "classid", "data" y "archive".

standby = Asigna un mensaje que el navegador puede mostrar mientras el objeto se esté cargando.

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

<PARAM>

name = Asigna un nombre al elemento. Se asume que este nombre es conocido por el objeto contenedor (tag HTML object).

value = Asigna un valor correspondiente al atributo "name" .

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

<EMBED>

SRC: URL del recurso a ser embebido.WIDTH: ancho del area donde estará el videoHEIGHT: alto del area donde estará el videoALIGN: donde estará el video respecto a los otros objetos.NAME: nombre del objeto embebidoPLUGINSPAGE: de donde tener el plugin necesario.PLUGINURL: de donde tener el archivo JAR para la instalación automática del plugin. HIDDEN: determina si el objeto es visible o no.HREF: hace de este objeto una referencia.TARGET: frame al cual hacer el link. 

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

<EMBED>

AUTOSTART: determina si el video comienza automáticamenteLOOP: cuantas veces se repite la reproducciónPLAYCOUNT: cuantas veces se repite la reproducciónVOLUME: volumen del sonidoCONTROLS: cuales controles mostrarCONTROLLER: determina si los controles se mostrarán.

TAMBIÉN SE APLICA PARA <PARAM>

Curs Universitat d’Estiu UIB-UOC 2008Introducció al Tractament d’Imatges Digitals

Ejercicios:

1) Crear cuenta en youtube. Si ya se tiene, subir el video2.avi al youtube.

2) A partir del fichero videos_web.html, rellenar los espacios donde irá el video en el fichero videos_web_practica.html.

3) Cambiar los parámetros y ver las diferencias entre un resultado y otro.