Manejo avanzado de audio y video en html5(1)

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

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

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



http://www.ideadeliveryla.com/5_ventajas_del_HTML5_para_el_dise%C3%B1o_de_sitios_web_nota-65

http://www.ideadeliveryla.com/5_ventajas_del_HTML5_para_el_dise%C3%B1o_de_sitios_web_nota-65

Manejo avanzado de audio y video en html5(1)

Software

Transcript of Manejo avanzado de audio y video en html5(1)