Manejo avanzado de audio y video en html5(1)

Manejo Avanzado de Audio y
Video en HTML5
Rodríguez Caro Said 10410570
Campos Muñoz Iosdy Gisela 10410071
Fecha de Entrega :3/Septiembre/2014
1

Contenido:
 Introducción
 Marco Conceptual
 Referente a <audio>
 Características principales de <audio>
 Utilidad & beneficios
 Ejemplos de <audio>
 Referente a <video>
 Características principales de <video>
 Utilidad & beneficios
 Código de <video>
2

Introducción
• La versión 5 de HTML incorpora nuevas etiquetas para incluir vídeos
y audio en un documento HTML. Estas nuevas etiquetas nos
permitirán tanto incluir un reproductor con un archivo de audio
/video, como conectarlo con una fuente de audio o vídeo en directo.
4

Marco conceptual
• Anteriormente para ubicar un medio en un sitio web, era
necesario agregarlo mediante un <embed> o depender de
flash.
• Ahora como una de las principales características de
HTML5 se encuentra el soporte nativo para medios
mediante las etiquetas <audio> y <video>. Estas etiquetas
permiten consumir multimedia sin necesidad de instalar
plugins adicionales al navegador o computadora.
• La diferencia entre las etiquetas <audio> y <video> es
minima.
5

 Esta etiqueta es muy sencilla, puesto que sólo implica un
reproductor de audio implementarla es simple.
<audio src= “ musica.mp3" preload autoplay controls loop>
Este explorador no soporta HTML 5.
</audio>
7

Características
Principales. 8

• autobuffer - Cargar automáticamente el archivo ( true /
false )
• autoplay - Reproduce automáticamente el archivo
• controls - Mostrar controles de reproducción
• height - Altura del reproductor en píxeles
• loop - Reiniciar la reproducción al finalizar
• type - Tipo de archivo ( audio/mp3, video/ogg, ... )
• src - Url del archivo
• width - Ancho del reproductor en píxeles
9

Utilidad y Beneficios
Esta etiqueta define un sonido, como la música u otros flujos de audio.
• Ventajas:
 El navegador es el que reproduce de forma nativa el contenido
multimedia.
 No necesita ningún plugin externo.
 Se estudia o analizan los distintos formatos y codecs que están
disponibles y se indica cuales son los que utilizan los principales
navegadores.
 Proporciona indicaciones para completar el código de forma que los
navegadores antiguos puedan reproducir el contenido multimedia
mediante flash.
11

• Esta etiqueta soporta tres formatos de audio distintos;
ogg, mpeg y wav. Y como no todos los navegadores
soportan ogg o mpeg, un código como el que se muestra,
permitiría un acceso a la página web desde los principales
navegadores sin problemas.
<audio controls autoplay preload>
<source src="cancion.ogg" type="audio/ogg" />
<source src="cancion.mp3" type="audio/mpeg" />
<source src="cancion.wav" type="audio/wav" />
</audio>
Distintos formatos de audio 12

Ejemplos de código para
Audio.
13

1-
<!DOCTYPE html>
<html>
<head>
<title> Audio En Mozilla</title>
</head>
<body>
<audio src="ARROLLADORA.mp3" preload="auto" controls></audio>
</body>
</html
14

2-
<! DOCTYPE html>
<head>
<title>
Compatible con varios formatos de audio ejemplo
</ title>
</ head>
<body>
<h1>
Usando fuente de soportar múltiples formatos de audio
</ h1>
<- El navegador elegirá automáticamente el formato que soporta. ->
<controles de audio = "true">
<fuente src = tipo "ARROLLADORA.mp3" = "audio / mp3">
<fuente src = tipo "ARROLLADORA.ogg" = "audio / ogg">
<src = fuente tipo "ARROLLADORA.aac" = "audio / mp4">
<! - Si no hay ningún apoyo en absoluto. ->
Audio HTML5 no soportado
</ audio>
</ body>
</ html> 15

3-
<!DOCTYPE HTML>
<html>
<head>
<title>fuente de múltiples elementos</title>
</head>
<body>
<audio id="audioTestElem" autobuffer controls >
<source src="test.m4a">
<source src="test.ogg" type="audio/ogg; codecs=vorbis">
<source src="url">
no audio for you
</audio>
</body>
</html>
16

• La etiqueta <video> es una de las más populares entre los
desarrolladores web, y ha sido el cambio más
significativo desde que flash player propuso video con
calidad HD.
• Implementarla es sencillo al igual que la etiqueta <audio>
<video src="video.mp4" width="640" height="360" controls autoplay
preload>
</video>
18

Características
Principales: 19

• autoplay - Reproduce automáticamente el archivo
• controls - Mostrar controles de reproducción
• height - Altura del reproductor en píxeles
• loop - Reiniciar la reproducción al finalizar
• poster - Especifica una imagen para mostrar mientras el video
se descarga o hasta que el usuario de clic en el botón
reproducir.
• type - Tipo de archivo
• src - Url del archivo
• width - Ancho del reproductor en píxeles
20

• Esta etiqueta especifica un video, como una película u
otros flujos de video.
• Ventajas
Nos permite reproducir un video de manera que
reproducir un video en un sitio web se convierta en algo
muy sencillo.
Tiene un gran rendimiento, Comparado con flash.
Utilidad & Beneficios
22

• Esta etiqueta soporta tres formatos de video distintos;
ogg, mp4 y webm. Y como no todos los navegadores
soportan ogg o mpeg, un código como el que se muestra,
permitiría un acceso el archivo de video desde los
principales navegadores sin problemas.
<video width="640" height="360" controls autoplay preload>
<source src="mivideo.mp4" type= " video/mp4" />
<source src="mivideo.ogv" type= " video/ogg" />
<source src="mivideo.webm" type= " video/webm" />
</video>
Distintos formatos de video 23

1-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<video controls preload>
<source src="video-gracioso.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="video-gracioso.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> Tu navegador no lo soporta. <a href="video-gracioso.mp4">Puedes descargar el video.</a>
</p>
</video>
</body>
</html>
24

• Conclusión General
Se analizo el funcionamiento de <audio> & <video> y se
llego a la conclusión de que su comportamiento es similar a
los anteriores, que solo cuenta con la ventaja de adaptarse al
navegador que lo soporte.
26

• Bibliografía
• [1]https://developer.mozilla.org/es/docs/Web/HTML/Usa
ndo_audio_y_video_con_HTML5
• [2]http://www.ideadeliveryla.com/5_ventajas_del_HTML
5_para_el_dise%C3%B1o_de_sitios_web_nota-65
27

Manejo avanzado de audio y video en html5(1)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Manejo avanzado de audio y video en html5(1)

Similar a Manejo avanzado de audio y video en html5(1) (20)

Manejo avanzado de audio y video en html5(1)