Upload
iosdy-campos
View
334
Download
3
Embed Size (px)
DESCRIPTION
Ofrece un servicio sobre HTML5 y especifica las caracteristicas de las etiquetas para ofrecer un mejor diseño web.
Citation preview
1
Manejo Avanzado de Audio y Video en HTML5Rodríguez Caro Said 10410570Campos Muñoz Iosdy Gisela 10410071Fecha de Entrega :3/Septiembre/2014
2
Contenido:
IntroducciónMarco ConceptualReferente a <audio>Características principales de <audio>Utilidad & beneficiosEjemplos de <audio>Referente a <video>Características principales de <video>Utilidad & beneficiosCódigo de <video>
3Resultados:
4
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.
5
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.
6
<Audio>
7
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>
8
Características Principales.
9
• 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
10
11
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.
12
• 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" />
Este explorador no soporta HTML 5.</audio>
Distintos formatos de audio
13
Ejemplos de código para Audio.
14
1-<!DOCTYPE html>
<html>
<head>
<title> Audio En Mozilla</title>
</head>
<body>
<audio src="ARROLLADORA.mp3" preload="auto" controls></audio>
</body>
</html
15
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>
16
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>
17
<Video>
18
• 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>
Este explorador no soporta HTML 5. </video>
19
Características Principales:
20
• 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
21
22
Utilidad & Beneficios
• Esta etiqueta especifica un video, como una película u otros flujos de video.
• VentajasNos 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.
23
• 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
24
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>
25
Conclusiones:
26
•Conclusión GeneralSe 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.
27
• Bibliografía• [1]
https://developer.mozilla.org/es/docs/Web/HTML/Usando_audio_y_video_con_HTML5
• [2]http://www.ideadeliveryla.com/5_ventajas_del_HTML5_para_el_dise%C3%B1o_de_sitios_web_nota-65