HTML5 Video - Audiodi002.edv.uniovi.es/~labra/cursos/html5/presentaciones/HTML5_vide… · HTML5...

HTML5

Video - Audio

Edita Hovhannisyan

HTML5

Contenido multimedia en Web Flash Player (Adobe)

Descargar plugin de terceros

HTML5

Etiquetas <audio> y <video>

Se integra contenido multimedia en la pagina web

No es necesario descargar software de terceros

Conceptos básicos

Contenedor de videoAlmacena 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

VIDEO

AUDIO

M

E

T

A

D

A

T

O

S

Contenedor

Conceptos básicos

Códec de vídeo y audioAlgoritmo 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 <video>

Atributos:

width/height

Solo pueden ser valores enteros

Se miden en píxeles

<video src="ejemplo.mp4" width="375" height="280"> </video>

height

width

Etiqueta <video>

controls

Atributo booleano

Al incluir en el código = navegador pone los controles

visibles

<video src="ejemplo.mp4" controls > </video>

Etiqueta <video>

autoplay

Atributo booleano

Safari en iPhone lo ignora

loop

Atributo booleano

<video src="ejemplo.mp4" controls autoplay loop> </video>

Etiqueta <video>

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 <video>

poster

La imagen que aparece al cargar el video

En iOS3(corregido en iOS4) no se reproduce el video

si existe el atributo

<video src="ejemplo.mp4" controls poster=“poster.jpg” ></video>

muted

El video por defecto está en silencio

<video src="ejemplo.mp4" controls muted></video>

Etiqueta <video>

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

<track src=“sub.vtt" kind="subtitles" srclang="en“ ></track>

Ejemplo fichero WebVTT

00:00:01.000 --> 00:00:10.000

El primer texto, se visualizará lo primeros 10 segundosdel video.

00:00:15.000 --> 00:00:20.000La 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

<!DOCTYPE HTML><html><head>

<title>Ejemplo Video HTML5!</title></head><body><h1>Ejemplos Videos</h1>

<video src="ejemplo.webm" width="375" height="280" controls > </video></body>

</html>

Soporte para multiples formatos

Elemento source

Permite que cada navegador cargue el video con su

formato

<source src=“ejemplo.mp4” type=“video/mp4”><source src=“ejemplo.webm” type=“video/webm”>

<source src=“ejemplo.ogv” type=“video/ogg”>

atributo typePermite al navegador determinar si puede

reproducir el video, en caso contrario el navegador no descarga el video.

<source src=“ejemplo.mp4” type=“video/mp4”

Modifica tu fichero para que el video se visualice en varios

navegadores.

Ejemplo

<!DOCTYPE HTML><html><head>

<title>Ejemplo Video HTML5!</title></head><body><h1>Ejemplos Videos</h1>

<video width="375" height="280" controls >

<source src=“ejemplo.mp4” type=“video/mp4”>

<source src=“ejemplo.webm” type=“video/webm”>

<source src=“ejemplo.ogv” type=“video/ogg”>

</video></body>

</html>

¿Qué pasa con IE anteriores al 9?

Muchos usuarios que usan versiones 6 – 8 de IE

Navegadores que no reconocen el atributo video lo

ignoran

Si la etiqueta video tiene HTML válido los navegadores lo

muestran

Según Adobe el 99% de los usuarios tiene el plugin de

Flash instalado

¿Qué pasa con IE anteriores al 9?

<source src="ejemplo1.mp4" type="video/mp4">

<source src="ejemplo1.ogv" type="video/ogg>

<object width="373" height="280" type="application/x-shockwave-flash" data="mediaplayer/player.swf“>

<param name="movie" value="mediaplayer/player.swf" >

<param name="allowFullScreen" value="true" >

<param name="wmode" value="transparent" >

<param name="flashvars" value="file=../ejemplo1.mp4">

<img src="monsters.jpg" id="video-still" width="373" height="280" alt="Monsters.Inc" title="El navegador no puede reproducir el video!">

</object>

Descarga JW Player de LongTail

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

<div id="contenedor_video"><video id="video" width="373" height="280" preload controls>

…</video>

<div id="controls" class="hidden"><div id="playPause" class="paused">Play/Pause</div><div id="timer">00:00</div>

<div id="muteUnmute" class="unmuted" >Mute/Unmute</div></div>

</div>

API JavaScript - ejemplo

videoEl.addEventListener('canplay', function () {

videoEl.removeAttribute("controls");

}, false);

Ocultar los controles:Eliminar controls del código htmlProblema usuarios sin JavaScript

addEventListenerescucha 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

playPauseBtn.addEventListener('click', function () {

if (videoEl.paused) {

videoEl.play();

} else {

videoEl.pause();

}

}, false);

paused

verifica si el video se esta reproduciendo o no

devuelvo true, si el video no se está reproduciendoplay()

activa el video desde su última posición de pausa

pause()detiene la reproducción del video

API JavaScript - ejemplo

videoEl.addEventListener('pause', function () {

playPauseBtn.removeClass("playing");

playPauseBtn.title = "Play";

}, false);

pauseevento que se activa cuando se detiene la

reproducción del video

playevento que se activa cuando se reproduce el

video

Activar/Desactivar Silencio

muteBtn.addEventListener('click', function () {if (videoEl.muted) {

videoEl.muted = false;}

else {videoEl.muted = true;}

}, false);

mutedtrue si el sonido está en silenciadofalse en el caso contrario

No existe evento mute/unmute como en pausa/playExiste el evento volumenchange

Evento ended

endedse activa cuando el video llega al final y se

detiene

Ejemplo:Cuando el video llegue a su fin, ponlo al principio.

currentTimerepresenta 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 <audio>

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/current-

work/multipage/the-video-element.html#attr-media-

crossorigin

Compatibilidad Navegadores

http://caniuse.com/

w3schools

http://www.w3schools.com/html5/html5_video.asp

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html













http://caniuse.com/

http://www.w3schools.com/html5/html5_video.asp

Ejemplos

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






HTML5 Video - Audiodi002.edv.uniovi.es/~labra/cursos/html5/presentaciones/HTML5_vide… · HTML5...

Documents

Transcript of HTML5 Video - Audiodi002.edv.uniovi.es/~labra/cursos/html5/presentaciones/HTML5_vide… · HTML5...