SISTEMAS WEB. Facultad de Estadística e Informática

Transcripción

1 SISTEMAS WEB

2 Bibliografía HTML Media. (s.f.). Consultado el 12 de junio de Extraído desde:

3 Agenda IV. Lenguajes para el desarrollo de sistemas web. HTML5 y Multimedia

4 Qué es multimedia? 1. adj. Que utiliza conjunta y simultáneamente diversos medios, como imágenes, sonidos y texto, en la transmisión de una información. RAE Los primeros navegadores Web solo soportaban texto, de una fuente y de un color. Posteriormente podíamos mostrar diversas fuentes de letra, colores e imágenes. Cuando fue posible incluir audio, video y animación, cada navegador gestionaba estos elementos de manera diferente. Diferentes formatos eran soportados por diferentes navegadores y algunos requerían programas extra (plug-ins) para funcionar. HTML5 ha cambiado la historia, facilitando la inclusión de multimedia en la Web.

5 Video en una página Web con HTML5

6 Formatos más comunes de video FORMATO ARCHIVO DESCRIPCIÓN MPEG.mpg.mpeg Desarrollado por Moving Pictures Expert Group, fue el primer formato más popular en Internet. Soportado por todos los navegadores; pero no por HTML5. AVI.avi (Audio Video Interleave). Desarrollado por Microsoft. Usado comúnmente en video cámaras y TV. Funciona bien en computadoras con Windows, pero no en navegadores Web. WMV.wmv (Windows Media Video). Desarrollado por Microsoft QuickTime.mov Desarrollado por Apple. Funciona bien en videocámaras y TV. Funciona bien en computadoras Apple, pero no en navegadores Web. RealVideo.rm.ram Desarrollado por Real Media para permitir video streaming en anchos de banda bajos. Es utilizado aún para video en línea e Internet TV; pero no funciona en navegadores Web.

7 Formatos más comunes de video FORMAT O Flash ARCHIV O.swf.flv DESCRIPCIÓN Desarrollado por Macromedia. Generalmente requiere un plug-in para uncionar en navegarores Web. Ogg.ogv Theora Ogg. Desarrollado por la fundación Xiph.Org. Soportado por HTML5. WebM.webm Desarrollado por Mozilla, Opera, Adobe, y Google. Soportado por HTML5. MPEG-4 or MP4.mp4 Desarrollado por Moving Pictures Expert Group. Basado en QuickTime. Usado comúnmente en nuevas videocámaras y TV. Soportado por HTML5. Recomendado por YouTube.

8 Incluyendo videos en páginas Web con HTML5 Anteriormente solo se podía incrustar video en páginas Web usando plug-in. HMTL5 incluye el elemento <video> para determinar una forma estándar de incrustar video en una página HTML. Primeras versiones que aceptaron el elemento <video> completamente.

9 Soporte de formatos de video en los diferentes navegadores

10 Media Type

11 Elemento <video> <video id="video1" style="width:60%;" controls preload= "none" class="center-block" onended="rebobinar(id)" data-descripcion="<b>rebote, mano derecha:</b><br> Este ejercicio ayuda a adquirir seguridad al producir sonido con cualquier dedo mientras la mano rebota."> <source type="video/mp4" src="videos/5tsd-rebote.mp4"></source> <source type="video/ogg" src="videos/5tsd-rebote.ogv"></source> El navegador no soporta HTML5 video. </video>

12

13 Métodos, propiedades y eventos. HTML5 define métodos, propiedades y eventos DOM para el elemento <video>. Lo que permite cargar (load), reproducir (play), pausar (pause), videos, establecer la duración y el volumen. También existen eventos que pueden notificar cuando un video ha sido reproducido, pausado, etcétera. function Rebobinar(videoplay){ mivideo = document.getelementbyid(videoplay); mivideo.currenttime = 0; }

14 Pausar, rebobinar, esconder un video. function Videos() { lastvideo = document.getelementbyid('video1'); $('.menu-videos a').click(function(){ $('.menu-videos a').removeclass('active'); $(this).addclass('active'); if( lastvideo!= null ){ if (!lastvideo.paused) lastvideo.pause(); lastvideo.currenttime = 0; $(lastvideo).hide(); }

15 Cont. } var id = $(this).data('video'); mivideo = document.getelementbyid(id); var descripcion = $(mivideo).data('descripcion'); $(mivideo).show(); $('#video-descripcion').html(descripcion); window.settimeout("mivideo.play()",7000); lastvideo = mivideo; }); $('.menu-videos a:first-child').click();

16 Otro ejemplo. Gestionando propiedades de un video en HTML5.

17 Audio en una página Web con HTML5

18 Al igual que el video; el audio solo podía ser incrustado en una página Web, a través de plug-ins como Flash. El elemento <audio> de HTML5 define una manera estándar de incrustar audio en una página HTML. Primeras versiones que aceptaron el elemento <audio> completamente.

19 Para agregar un elemento de audio en una página Web con HTML5, se emplea el elemento <audio>. <audio controls> <source src= miaudio.ogg" type="audio/ogg"> <source src= miaudio.mp3" type="audio/mpeg"> El navegador no soporta audio.. </audio> El navegador elegirá el primer formato reconocido.

20 Formatos de audio aceptados por los navegadores

21 Media Types

22 Métodos, propiedades y eventos del elemento <audio>. HTML5 define métodos, propiedades y eventos DOM para el elemento <audio>. Lo que permite cargar (load), reproducir (play), pausar (pause), audios, establecer la duración y el volumen. También existen eventos que pueden notificar cuando un audio ha sido reproducido, pausado, etcétera.

23 Referencia DOM HTML Audio/Video

24 Gracias por su atención