Clase : 7
Multimedia
OBJETIVOS
• Agregar audio a una página de XHTML.
• Agregar un vídeo a un sito Web .
• Enlazar un video externo a una página de
XHTML.
Que es Multimedia
• El término multimedia se utiliza para referirse a
cualquier objeto o sistema que utiliza múltiples
medios de expresión físicos o digitales para
presentar o comunicar información. De allí la
expresión multimedios.
• Los medios pueden ser variados, desde texto e
imágenes, hasta animación, sonido, video, etc.
Multimedia HTML 5
• En HTML5 se pretende que el contenido
multimedia, (audios y vídeos) formen parte de la
página y dejen de ser unos elementos incrustados.
• Se pretende por tanto que los nuevos
navegadores se adapten a ello e incorporen
recursos para poder reproducir este contenido sin
tener que usar plugins externos.
Elementos Multimedia
• Algunas etiquetas nuevas sirven para integrar
contenido multimedia, pues es habitual que estos
nuevos tipos de información estén presentes en la
web.
– audio: Para insertar sonido dentro de una web.
– video: Para insertar clips de vídeo.
– embed: Para embeber contenido externo de otro tipo,
como el traído de diversos plugins que se comercializan
actualmente o se comercializarán en el futuro.
– source: Permite especificar varias fuentes diferentes
cuando se insertan elementos en AUDIO y VÍDEO.
– track: Permite especificar varias pistas de sonido o
vídeo para los elementos AUDIO y VÍDEO.
Etiquetas Audio y Video
• Dos nuevas etiquetas para incrustar contenido
multimedia directamente: <audio>
</audio> y<video> </video>
• Estas etiquetas pretenden simplificar la inserción
de contenido multimedia, evitando tener que usar
plugins en el navegador.
• Es el propio navegador el que debe reconocer el
formato multimedia y ponerlo en marcha.
Etiquetas Audio y Video
• Las etiquetas audio y video tienen los siguientes
atributos para poder localizar y controlar el archivo
multimedia.
• src="ruta_del_archivo" : Al igual que con las
imágenes indicamos en este atributo la ruta del
archivo.
• autoplay Indica que el archivo debe reproducirse
automáticamente al cargarse la página. Este atributo
no tiene valores.
• controls Indica que deben mostrarse los controles
para que el usuario pueda iniciar, detener , pausar el
archivo. Este atributo no tiene valores.
Etiquetas Audio y Video
• loop El archivo vuelve a reproducirse cuando acaba,
una y otra vez. Este atributo tampoco tiene valores.
• autobuffer El archivo tiene que descargarse
completamente antes de empezar a reproducirse. Al
igual que los anteriores no necesita valores.
• widht="num"Sólo para video; su valor indica en
pixels el ancho de la pantalla en que se reproduce el
video.
• height="num"Sólo para video; su valor indica en
pixels el alto de la pantalla en que se reproduce el
video.
Etiquetas Audio y Video
• Veamos con algunos ejemplos cómo se puede
escribir el código:
• <audio src="sintonia.mp3" autoplay
loop ></audio>
• <video src="mivideo.mp4" controls
autobuffer widht="300"></video>
La etiqueta Sourse
• No todos los navegadores soportan todos los
formatos de audio o video, por lo que podemos
poner en la página enlaces al mismo archivo en
varios formatos, para que el navegador detecte el
formato que soporta. Para ello utilizamos la
etiqueta source como en el siguiente ejemplo:
<audio autoplay loop>
<source src="sintonia.mp3"/>
<source src="[Link]"/>
<source src="[Link]"/>
</audio>
Controls (Opcional)
• El atributo controls hace que el navegador
proporcione una interfaz con controles para la
reproducción y el control del volumen de forma
nativa.
• Los controles del navegador pueden ser
suplantados por controles propios usando
JavaScript a través de una API que proporcione
métodos para controlar todos los aspectos de la
reproducción del archivo de audio
La etiqueta Sourse
• La etiqueta es válida tanto para audio como
para video. Dentro de la etiqueta source indicamos
la ruta a diferentes archivos.
• El navegador intentará reproducir el archivo
indicado en la primera etiqueta, si no lo consigue
pasará a la segunda, y así sucesivamente hasta
que consiga reproducir alguno de ellos.
<video controls>
<source src="[Link]" ype="video/ogg">
<source src="foo.mp4" type="video/mp4">
Tu navegador no implementa el elemento
<code>video</code>.
</video>
Controls (Opcional)
<audio id="player" src="archivo.mp3">
</audio>
<div>
<button onclick="[Link]('player').play();">Reproducir</button>
<button onclick="[Link]('player').pause();">Pausa</button>
<button onclick="[Link]('player').volume += 0.1;">Subir
Volumen</button>
<button onclick="[Link]('player').volume -= 0.1;">Bajar
Volumen</button>
</div>
Portada de audio
• También podemos definir una imagen
representativa para el vídeo para que sea
mostrada al navegador como portada del elemento
antes de la reproducción usando el
atributo poster:
<video src="archivo.mp4" controls
width="360" height="240"
poster="[Link]">
</video>
La etiqueta Objet
• HTML5 mantiene la etiqueta object para reproducir
archivos multimedia, pero además tiene también
otra función interesante, que es sustituir a la
etiqueta iframe para incrustar una página o archivo
dentro de otra.
• la cosa es tan fácil como usar un código como el
siguiente:
• <object type="text/html"
data="[Link] width="400"
height="300"> </object>
La etiqueta Object
• Para insertar un vídeo de Youtube u otro sitio de
vídeos.
<object width="400" height="250">
<param name="movie" value="URL"</param>
<param name="allowFullScreen"
value="true"></param>
<embed src="URL" type="application/x-
shockwave-flash" allowfullscreen="true"
width="400" height="250">
</embed>
</object>
Investigar
• Formatos para tipos de audio.
• Formatos de vídeo.
• Formatos para animaciones web.
¿ALGUNA PREGUNTA?
Muchas Gracias por su Atención
