HTML5 Video - Audio

Edita Hovhannisyan

HTML5 Contenido multimedia en Web Flash Player (Adobe) Descargar plugin de terceros HTML5 Etiquetas y Se integra contenido multimedia en la pagina web No es necesario descargar software de terceros

Conceptos básicos Contenedor de video Almacena todos los datos necesarios que forman el archivo de video. Información de Audio Información de video Metadatos que describen contenidos Las pistas de vídeo y audio están comprimidas

Contenedor

VIDEO AUDIO

M E T A D A T O S

Conceptos básicos Códec de vídeo y audio Algoritmo para codificar y decodificar un flujo de datos multimedia… En el caso del video HTML5 Decodificación y reproducción de videos Ejemplos: Video:H.264, VP8 Audio: AAC, Vorbis El contenedor de video, códec de video, códec de audio no hay un estándar.

Contenedores de video soportados por HTML Ogg Desarrollado por la Fundación Xiph.org,Sin patenetes y libre La extensión ".ogg" pueden ser tipo de archivo audio (.oga ) o vídeo(ogv) Codec de video Theora Codec de audio Vorbis MPEG-4 Desarrollado por MPEG (Moving Picture Experts Group) Codec de video H.264 Codec de audio AAC WebM Contenedor de vídeo abierto y libre desarrollado por Google Codec de video VP8 Codec de audio Vorbis

Contenedores soportados por los navegadores

Contenedor

Ogg [Theora/ Verbis] MPEG-4 [H.264/ AAC]

-

-

-

-

-

-

-

WebM [VP8/ Verbis] * IE9 soporta WebM con codec VP8 si el usuario ha instalado el codec VP8

-

Etiqueta Atributos: width/height Solo pueden ser valores enteros Se miden en píxeles

width height

Etiqueta controls Atributo booleano Al incluir en el código = navegador pone los controles visibles

Etiqueta autoplay Atributo booleano Safari en iPhone lo ignora loop Atributo booleano

Etiqueta Preload auto: el video y sus metadatos asociados empezarán a cargarse antes de reproducirse => cuando el usuario lo solicite la respuesta es más rápida none: no se carga el vídeo en segundo plano metadata: solo se cargan los metadatos asociados, como dimensiones, duración. Si se omite => depende del navegador el valor del atributo

Load…

Etiqueta poster La imagen que aparece al cargar el video En iOS3(corregido en iOS4) no se reproduce el video si existe el atributo

muted El video por defecto está en silencio

Etiqueta track Texto asociado a la imagen y al sonido Subtítulos, comentarios, traducciones

El formato WebVTT (Web Video Text Tracks) Propuesta del Web Hypertext Application Technology Working Group (WHATWG) para generar los subtítulos estándar para los videos en HTML5

Ejemplo fichero WebVTT

00:00:01.000 --> 00:00:10.000 El primer texto, se visualizará lo primeros 10 segundos del video.

00:00:15.000 --> 00:00:20.000 La segunda línea de texto se visualizará desde el segundo 15 hasta el 20 El formato es: hh:mm:ss.mmm

Descarga mirovideoconverter http://www.mirovideoconverter.com/ Descarga un video Chrome: YouTube Downloader Firefox: Click YouTube Video Download

Muestra tu video en la web!!!

Ejemplo Ejemplo Video HTML5! Ejemplos Videos

Soporte para multiples formatos Elemento source Permite que cada navegador cargue el video con su formato

atributo type Permite al navegador determinar si puede reproducir el video, en caso contrario el navegador no descarga el video.

API JavaScript Ejemplo modificar controles de video Incluir la hoja de estilo estilo.css Modificar el html5 para poder hacer referencia a los elementos video y controls … Play/Pause 00:00 Mute/Unmute

API JavaScript - ejemplo Ocultar los controles: Eliminar controls del código html Problema usuarios sin JavaScript videoEl.addEventListener('canplay', function () { videoEl.removeAttribute("controls"); }, false); addEventListener escucha el evento especificado que ocurre en el elemento objetivo.

API elementos multimedia canplay evento que se activa tan pronto puede reproducir el video canplaythrough evento que se activa si el navegador puede reproducir el video hasta el final

Reproducir y pausar video paused

play() pause()

verifica si el video se esta reproduciendo o no devuelvo true, si el video no se está reproduciendo activa el video desde su última posición de pausa

detiene la reproducción del video

playPauseBtn.addEventListener('click', function () { if (videoEl.paused) { videoEl.play(); } else { videoEl.pause(); } }, false);

API JavaScript - ejemplo pause

evento que se activa cuando se detiene la reproducción del video play

video

evento que se activa cuando se reproduce el

videoEl.addEventListener('pause', function () { playPauseBtn.removeClass("playing"); playPauseBtn.title = "Play"; }, false);

Activar/Desactivar Silencio muted true si el sonido está en silenciado false en el caso contrario muteBtn.addEventListener('click', function () { if (videoEl.muted) { videoEl.muted = false; } else { videoEl.muted = true; } }, false);

No existe evento mute/unmute como en pausa/play Existe el evento volumenchange

Evento ended ended

se activa cuando el video llega al final y se detiene Ejemplo:Cuando el video llegue a su fin, ponlo al principio. currentTime representa la posición actual de reproducción

Solución ejemplo end video videoEl.addEventListener('ended', function () { videoEl.currentTime = 0; videoEl.pause(); }, false);

Evente timeupdate timeupdate el evento se activa cada vez que cambia la hora del video videoEl.addEventListener('timeupdate', function () { timeHolder.innerHTML =videoEl.currentTime; }, false);

Más Eventos… loaddedata: se ha cargado el primer fotograma de la multimedia seeking: se ha comenzado una operación de búsqueda seeked: se ha completado una operación de búsqueda error: ha ocurrido un error

Más Atributos… duration: devuelve la longitud del video en segundos readState devuelve un númerico entre 0 -4 representa el nivel de disponibilidad del elemento multimedia src devuelve el valor de la URL del video que se reproduce, solo si el elemento video tiene el atributo src currentSrc devuelve el valor de la URL del video que se reproduce, si el video o source tiene el atributo src playbackRate El índice de reproducción pòr defecto es 1, se puede agilizar o ralentizar.Uso rebobinar o cámara lenta.

Ejercicio: Añade un botón para visualizar el vídeo en pantalla completa Chrome y Safari: webkitEnterFullScreen(); Firefox: mozRequestFullScreen();

Solución pantallaCompleta.addEventListener('click', function () { //Para Chrome y Safari videoEl.webkitEnterFullScreen(); //Para firefox videoEl.mozRequestFullScreen(); }, false);

Ejercicio Visualizar dos videos en la misma página Web Desde el video 1 controlar el segundo video y viceversa.

Etiqueta Soporta los siguientes formatos: MP3 Ogg WAV

Los atributos de video se pueden utilizar con el audio No todos los navegadores soportan el mismo formato

Enlaces de Interés Especificación video/audio http://www.whatwg.org/specs/web-apps/currentwork/multipage/the-video-element.html#attr-mediacrossorigin

Compatibilidad Navegadores http://caniuse.com/ w3schools http://www.w3schools.com/html5/html5_video.asp

Ejemplos

http://www.xanthir.com/demos/video/demo2.html http://www.xanthir.com/demos/video/demo4.html

http://www.xanthir.com/demos/video/demo3.html