Curs Universitat d’Estiu UIB-UOC 2008
Introducció al Tractament d’Imatges Digitals
Utilització del vídeo en
pàgines web
Curs Universitat d’Estiu UIB-UOC 2008
Introducció al Tractament d’Imatges Digitals
http://www.sandiegozoo.org/zoo/ex_polar_bear_plunge.html
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.
Curs Universitat d’Estiu UIB-UOC 2008
Introducció 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 2008
Introducció 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 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.
<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 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">
<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 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.
<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 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.
<OBJECT ID="MediaPlayer" WIDTH="192" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F611D0-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 2008
Introducció 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 2008
Introducció 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 2008
Introducció 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 2008
Introducció al Tractament d’Imatges Digitals
<EMBED>
SRC: URL del recurso a ser embebido.
WIDTH: ancho del area donde estará el video
HEIGHT: alto del area donde estará el video
ALIGN: donde estará el video respecto a los otros objetos.
NAME: nombre del objeto embebido
PLUGINSPAGE: 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 2008
Introducció al Tractament d’Imatges Digitals
<EMBED>
AUTOSTART: determina si el video comienza automáticamente
LOOP: cuantas veces se repite la reproducción
PLAYCOUNT: cuantas veces se repite la reproducción
VOLUME: volumen del sonido
CONTROLS: cuales controles mostrar
CONTROLLER: determina si los controles se mostrarán.
TAMBIÉN SE APLICA PARA <PARAM>
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.
Descargar

Utilització del vídeo en pàgines web