View
2.742
Download
3
Embed Size (px)
DESCRIPTION
Citation preview
Curso HTML5 y el
Futuro de la Web
Jose María Álvarez Rodríguez
WESO-Universidad de Oviedo
E-mail: [email protected]
WWW: http://josemalvarez.es
Audio y Vídeo
19 de Julio 2012
Conceptos Clave
Diseño y Estilo Audio y Vídeo
Dibujar Rich-Apps
Geolocalización Semántica
Antecedentes
http://broadcast.rackspace.com/blog/HTMLtimeline/index.html
Documentos
Imágenes,
animaciones, etc.
Multimedia
HTML Code Evolution 1.0 to 5.0
Evolución
Adobe Flash Microsoft Silverlight
Algunas Ventajas…
Visualmente atractivas
Animaciones, etc.
Independientes de formatos, códecs, etc.
IDEs desarrollo
… y Problemas
Soluciones Propietarias
Soporte multidispositivo y
plataforma
Accesibilidad
Metadatos
Interoperabilidad
Necesidad de plugins
….
Diversidad de
formatos
Diversidad de
navegadores
Diversidad de
dispositivos
http://mobisynth.files.wordpress.com/2011/02/tar3.png
Solución previa <embed src=“file.mid" autostart="false" loop="false"
height="45" width="170">
<noembed>El navegador no soporta este
elemento.</noembed>
</embed>
<iframe width="420" height="315"
src="http://www.youtube.com/embed/7qA07K86Bfk"
frameborder="0" allowfullscreen>
</iframe>
<object width="420" height="315" >
<param name="movie"
value=" http://www.youtube.com/embed/7qA07K86Bfk "></param>
<param name="allowFullScreen" value="true"></param>
<embed src=" http://www.youtube.com/embed/7qA07K86Bfk "
type="application/x-shockwave-flash" width="425" height="344">
</embed>
</object>
1
2
3
Tarea 0
Visitar sitios web de distribución de audio y vídeo e identificar qué solución
técnica utilizan
Ejemplos: Youtube, Vimeo, Scribd, Hulu,
Dalealplay, TV3, BBC, Marca, LNE, etc.
HTML5 en acción
Nuevos elementos
(no admiten cierre en línea)
<audio></audio>
<video></video>
<audio src="gandalf_onering.mp3" controls></audio>
<video src="videos/arresto.mp4" autoplay></video>
Tarea 1
Ir a la página de clips de audio y hacer un “poco de ruido” con HTML5
http://www.mediacollege.com/downloads/sound-
effects/
Ver: cursoHtml5/audio-video/ejemplos/t1.html
Tarea 2
Mostrar un vídeo con HTML5
Ver: cursoHtml5/audio-video/ejemplos/t2.html
http://www.mediaconverter.org/
Especificación • http://www.w3.org/wiki/HTML/Elements/audio
• http://www.w3.org/wiki/HTML/Elements/video
• http://www.w3schools.com/html5/html5_ref_av_dom.
asp
Soporte
Depende del
navegador…formatos, etc.
Navegador MP3 Wav Ogg
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6
Formatos de audio
Navegador MP4 WebM Ogg
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6
Formatos de vídeo
Tarea 3
Chequear soporte de audio y vídeo de distintos navegadores en:
http://html5test.com/
HTC Desire HD
IPAD2
Especificación in
depth…
<audio> y <video>
Propiedades audioTracks Devuelve el objeto AudioTrackList que contiene la lista de
pistas disponibles autoplay Da valor o devuelve si el audio/video debería empezar
cuando la página se carga
buffered Devuelve un objeto TimeRange que contiene las partes del audio/video en el buffer
controller Devuelve el objeto MediaController que contiene la información del controlador de audio/video
controls Da valor o devuelve si el elemento de audio/video debe mostrar controles (play, etc.)
crossOrigin Da valor o devuelve la configuración CORS del audio/video
currentSrc Devuelve la URL de un elemento audio/video
currentTime Da valor o devuelve a la propiedad del tiempo de ejeución del elemento audio/video (en segundos)
<audio> y <video>
Propiedades defaultMuted Da valor o devuelve si el audio/video está silenciado por
omisión defaultPlaybackRate Da valor o devuelve la velocidad del playback
duration Devuelve la longitud en segundos
ended Devuelve si el play ha finalizado
error Devuelve un objeto MediaError con el error ocurrido
loop Da valor o devuelve si el audio/video debe ejecutarse en bucle
mediaGroup Da valor o devuelve el grupo de elementos de audio/video para su gestión
muted Da valor o devuelve si el audio/video está silenciado
networkState Devuelve el estado de la conexión de red
paused Da valor o devuelve si el audio/video está parado
playbackRate Da valor o devuelve la velocidad de ejecución
played Devuelve un objeto TimeRanges indicando las partes del audio/video que se ha ejecutado
preload Da valor o devuelve el valor para indicar si el audio/video debe ser cargado cuando se carga la página
readyState Devuelve el valor que indica si el audio/video está listo para ser reproductido
seekable Devuelve un objeto TimeRanges indicando las partes del audio/video que se pueden acceder directamente
seeking Devuelve el valor que indica si el usuario ha realizado un acceso directo al audio/video
src Da valor o devuelve la dirección del recurso en reproducción
startDate Devuelve un objeto Date que indica que el actual time offset
textTracks Devuelve un objeto TextTrackList object que indica las pistas textos disponibles
videoTracks Devuelve un objeto VideoTrackList que indica las pistas de vídeo disponibles
volume Da valor o devuelve el volumen del audio/video
<audio> y <video>
Propiedades
<audio> y <video>
Métodos
addTextTrack() Añade una nueva pista al audio/video
canPlayType() Chequea si el navegador puede reproducir ese tipo de audio/video
load() Recarga el elemento de audio/video
play() Inicia la reproducción del audio/video
pause() Pausa de la reproducción en curso del audio/video
<audio> y <video>
Eventos abort Se ejecuta cuando un audio/video se aborta/finaliza
canplay Se ejecuta cuando el navegador comienza con la reproducción del audio/video
canplaythrough Se ejecuta cuando el navegador puede ejecutar el audio/video sin parar por el buffering
durationchange Se ejecuta cuando cambia la duración del audio/video
emptied Se ejecuta cuando la lista de reproducción es vacía
ended Se ejecuta cuando la lista de reproducción finaliza
error Se ejecuta cuando se produce un error al cargar un audio/video
loadeddata Se ejecuta cuando el navegador ha cargado el frame en ejecución del audio/video
loadedmetadata Se ejecuta cuando el navegador ha cargado los metadatos del video
<audio> y <video>
Eventos loadstart Se ejcuta cuando el navegador comienza a cargar el audio/video
pause Se ejecuta cuando se pausa el audio/video play Se ejecuta cuando el navegador está en reproducción del audio/video
playing Se ejecuta cuando el navegador está lista para reproducir después de una pausa o bien porque ha parado debido al buffering
progress Se ejecuta cuando se está descargando el audio/video
ratechange Se ejecuta cuando se varia la velocidad de reproducción del audio/video
seeked Se ejecuta cuando se finaliza de realizar un acceso directo a una parte del audio/video
seeking Se ejecuta cuando se utiliza el acceso a una parte determinada del audio/video
stalled Se ejecuta cuando el navegador ha intentado acceder a los metadatos del video y éstos no están disponibles
suspend Se ejecuta cuando el navegador no es capaz de conseguir metadatos
timeupdate Se ejecuta cuando se cambia la posición de reproducción
volumechange Se ejecuta cuando se cambia el volumen waiting Se ejecuta cuando se hace buffering del siguiente frame
A experimentar…
Tarea 4
Probar las propiedades, eventos y métodos de HTML5 audio/vídeo
http://www.w3.org/2010/05/video/mediaev
ents.html
Tarea 5
• Añadir controles al vídeo poster, loop, controls
• Indicar tamaño (widht, height) del mismo
Ver: cursoHtml5/audio-video/ejemplos/t5.html
Tarea 5-Sol
<video src="videos/frews-
intro.mp4“
poster="freews.jpg"
loop controls
width="420"
height="315">
</video>
Tarea 6
Crear controles propios de load, play, pause y volumen
Ver: cursoHtml5/audio-video/ejemplos/t6.html
Tarea 7
Gestionar el evento “loadedmetadata” y que muestra el tamaño del vídeo:
videoWidth y videoHeight
Ver: cursoHtml5/audio-video/ejemplos/t7.html
Tarea 8
Crear el elemento vídeo con los elementos source como hijos
Ver: cursoHtml5/audio-video/ejemplos/t8.html
Tarea 8-Sol
<video poster="freews.jpg" controls width="420"
height="315">
<source src="videos/frews-intro.mp4"
type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'>
</source>
<source src="videos/frews-intro.ogg"
type='video/ogg; codecs="theora,
vorbis"'>
</source>
</video>
Tarea 9
Gestionar los errores que se pueden producir durante la ejecución del vídeo
Ver: cursoHtml5/audio-video/ejemplos/t9.html
http://dev.w3.org/html5/spec/single-page.html#error-codes
Tarea 10
Introducir subtítulos en un idioma Formato WebVTT hh:mm:ss.mmm
Ver: cursoHtml5/audio-video/ejemplos/t10.html
Los subtítulos deben estar en un servidor web.
http://dev.w3.org/html5/webvtt/
WebVTT
1 00:00:01,000 --> 00:00:03,000
Hola, primeros 3 segundos...
2 00:00:03,000 --> 00:00:05,000
Otro texto...
Tarea 11
Combinación de vídeo y canvas. Crear un canvas que muestre la imagen
del vídeo cada 1 seg.
Ver: cursoHtml5/audio-video/ejemplos/t11.html
Ejemplo
Combinación de vídeo y canvas para ir cambiando los colores
Ver: http://rocha.la/fun-with-pixels-html5-video-canvas
Ejemplo
Combinación de vídeo y canvas para hacer explotar la imagen del vídeo
Ver: http://craftymind.com/factory/html5video/CanvasVideo.html
Tarea 12
Combinación de vídeo y canvas. Crear un canvas que muestre la imagen
pixelada del vídeo en el fondo de la página.
Ver: cursoHtml5/audio-video/ejemplos/t12.html
Fallback
Usar Flash con HTML5
fallback
Usar HTML5 con Flash
fallback
Usar Flash con HTML5
fallback
<object id="flowplayer" width="700" height="400"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf"
type="application/x-shockwave-flash">
<param name="movie" value="videos/frews-intro.mp4 ">
<video controls width="700" height="400">
<source src="videos/frews-intro.mp4" type="video/mp4">
<source src="videos/frews-intro.ogg" type="video/ogg">
<img src="freews.jpg" alt=“Freews intro">
<p>No hay soporte ni de HTML5 video ni Flash.</p>
<p>Descargar vídeo
<a href="videos/frews-intro.mp4">MP4 H.264</a>
o <a href="videos/frews-intro.ogg">Ogg Theora</a>.
</p>
</video>
</object>
<video controls width=“420" height=“315">
<source src="videos/frews-intro.mp4" type="video/mp4">
<source src="videos/frews-intro.ogg" type="video/ogg">
<object id="flowplayer" width="700" height="400“
data="flowplayer-3.2.7.swf“
type="application/x-shockwave-flash">
<param name="movie" value="flowplayer-3.2.7.swf">
<param name="flashvars"
value='config={"clip":"videos/frews-intro.mp4.mp4"}'>
<img src="freews.jpg" alt=“Freews intro">
<p>No hay soporte ni de HTML5 video ni Flash.</p>
<p>Descargar vídeo
<a href="videos/frews-intro.mp4">MP4 H.264</a>
o <a href="videos/frews-intro.ogg">Ogg Theora</a>.
</p>
</object>
</video>
Usar HTML5 con Flash
fallback
Herramientas y
APIS
VideoJS player
jPlayer
Kaltura HTML5
…. http://html5video.org/wiki/HTML5_Player_Comparison
Preguntas abiertas
Licencia de los contenidos
Streaming desde tú dispositivo
Streaming adaptativo
Retrasos audio/vídeo
Creación dinámica
https://wiki.mozilla.org/Audio_Data_API
Conclusiones
Nuevas posibilidades multimedia
Evolución natural de la web
Computación ubicua
Modelo abierto y accesible
Problemas con formatos y versiones
Licencias, etc.
Enlaces interesantes • http://html5-demos.appspot.com/
• http://www.w3schools.com/html5/html5_audio.asp
• http://www.w3schools.com/html5/html5_video.asp
• https://developer.mozilla.org/En/Media_formats_supported_by_t
he_audio_and_video_elements
• http://html5video.org/
• http://net.tutsplus.com/tutorials/html-css-techniques/html5-
audio-and-video-what-you-must-know/
• http://html5demos.com/
• http://html5-demos.appspot.com/
• https://developer.mozilla.org/en/Using_audio_and_video_in_Fir
efox
• https://github.com/etianen/html5media
• http://html5doctor.com/
• http://diveintohtml5.info/video.html
• http://caniuse.com/
• http://www.html5rocks.com/en/
Curso HTML5 y el
Futuro de la Web
Jose María Álvarez Rodríguez
WESO-Universidad de Oviedo
E-mail: [email protected]
WWW: http://josemalvarez.es
Audio y Vídeo
19 de Julio 2012