html5 video - audio
Post on 04-Feb-2022
18 Views
Preview:
TRANSCRIPT
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”
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><!-- #controls -->
</div> <!-- contenedor_video -->
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
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
top related