Manejo avanzado de audio y video en html5(1)
-
Upload
iosdy-campos -
Category
Software
-
view
334 -
download
3
description
Transcript of Manejo avanzado de audio y video en html5(1)
![Page 1: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/1.jpg)
1
Manejo Avanzado de Audio y Video en HTML5Rodríguez Caro Said 10410570Campos Muñoz Iosdy Gisela 10410071Fecha de Entrega :3/Septiembre/2014
![Page 2: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/2.jpg)
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>
![Page 3: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/3.jpg)
3Resultados:
![Page 4: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/4.jpg)
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.
![Page 5: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/5.jpg)
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.
![Page 6: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/6.jpg)
6
<Audio>
![Page 7: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/7.jpg)
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>
![Page 8: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/8.jpg)
8
Características Principales.
![Page 9: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/9.jpg)
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
![Page 10: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/10.jpg)
10
![Page 11: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/11.jpg)
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.
![Page 12: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/12.jpg)
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
![Page 13: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/13.jpg)
13
Ejemplos de código para Audio.
![Page 14: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/14.jpg)
14
1-<!DOCTYPE html>
<html>
<head>
<title> Audio En Mozilla</title>
</head>
<body>
<audio src="ARROLLADORA.mp3" preload="auto" controls></audio>
</body>
</html
![Page 15: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/15.jpg)
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>
![Page 16: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/16.jpg)
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>
![Page 17: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/17.jpg)
17
<Video>
![Page 18: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/18.jpg)
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>
![Page 19: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/19.jpg)
19
Características Principales:
![Page 20: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/20.jpg)
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
![Page 21: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/21.jpg)
21
![Page 22: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/22.jpg)
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.
![Page 23: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/23.jpg)
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
![Page 24: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/24.jpg)
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>
![Page 25: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/25.jpg)
25
Conclusiones:
![Page 26: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/26.jpg)
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.
![Page 27: Manejo avanzado de audio y video en html5(1)](https://reader036.fdocuments.mx/reader036/viewer/2022081508/5560b4edd8b42af93b8b4996/html5/thumbnails/27.jpg)
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