Utilització del vídeo en pàgines web Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals.

Presentación del tema: "Utilització del vídeo en pàgines web Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals."— Transcripción de la presentación:

1 Utilització del vídeo en pàgines web Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals

2 Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals http://www.sandiegozoo.org/zoo/ex_polar_bear_plunge.html

3 Curs Universitat d’Estiu UIB-UOC 2008 Introducció 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.

4 Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals 1.- Videos YouTube 1)Ir a www.youtube.comwww.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.

5 Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals 1.- Videos YouTube <embed src="http://www.youtube.com/v/kdckMCWa94Q" type="application/x-shockwave-flash" width="425" height="350"> Se usa para incluir imagenes, audio, videos, applets y animaciones en Flash. 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"> Provee datos de inicialización en el momento de ejecución – Mozilla.

6 Curs Universitat d’Estiu UIB-UOC 2008 Introducció 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. alt : PRUEBA.avi

7 Curs Universitat d’Estiu UIB-UOC 2008 Introducció 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"> alt : test.mov

8 Curs Universitat d’Estiu UIB-UOC 2008 Introducció 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. alt : test.wmv Si en FIREFOX no funciona, hay que descargar el plugin desde: http://port25.technet.com/pages/windows-media-player-firefox-plugin-download.aspx

9 Curs Universitat d’Estiu UIB-UOC 2008 Introducció 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.

10 Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals 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)

11 Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals 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.

12 Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals name = Asigna un nombre al elemento. Se asume que este nombre es conocido por el objeto contenedor (tag HTML object).tag HTML object value = Asigna un valor correspondiente al atributo "name".

13 Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals SRCSRC: URL del recurso a ser embebido. WIDTHWIDTH: ancho del area donde estará el video HEIGHTHEIGHT: alto del area donde estará el video ALIGNALIGN: donde estará el video respecto a los otros objetos. NAMENAME: nombre del objeto embebido PLUGINSPAGEPLUGINSPAGE: de donde tener el plugin necesario. PLUGINURLPLUGINURL: de donde tener el archivo JAR para la instalación automática del plugin. HIDDENHIDDEN: determina si el objeto es visible o no. HREFHREF: hace de este objeto una referencia. TARGETTARGET: frame al cual hacer el link.

14 Curs Universitat d’Estiu UIB-UOC 2008 Introducció al Tractament d’Imatges Digitals AUTOSTARTAUTOSTART: determina si el video comienza automáticamente LOOPLOOP: cuantas veces se repite la reproducción PLAYCOUNTPLAYCOUNT: cuantas veces se repite la reproducción VOLUMEVOLUME: volumen del sonido CONTROLSCONTROLS: cuales controles mostrar CONTROLLERCONTROLLER: determina si los controles se mostrarán. TAMBIÉN SE APLICA PARA

15 Curs Universitat d’Estiu UIB-UOC 2008 Introducció 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.