More Related Content Similar to Html5 Audio & video (20) 1. Leccion 7
Multimedia
Tuesday, December 13, 11
3. y u no told me!!!
Tuesday, December 13, 11
5. •Separacion por capas
•Modelo de cajas
•Selectores
•Pseudoelementos
•Transición
•Transformacion
Tuesday, December 13, 11
8. Leccion 7
Multimedia
Tuesday, December 13, 11
13. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://
download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="500"
height="311">
<param name="allowfullscreen" value="true" />
<param name="movie" value="http://www.somewebsite.net/player.swf" />
<param name="flashvars" value="file=http://www.somewebsite.net/trick.flv&image=http://
www.somewebsite.net/trick.gif" />
<embed width="500" height="311" allowfullscreen="true" type="application/x-shockwave-
flash" src="http://www.somewebsite.net/player.swf"
pluginspage="http://www.macromedia.com/go/getflashplayer"
flashvars="file=http://www.somewebsite.net/trick.flv&image=http://www.somewebsite.net/
trick.gif" />
</object>
Tuesday, December 13, 11
15. 32%
del trafico nocturno
48 horas
por minuto
Tuesday, December 13, 11
19. Porque Audio y Video en HTML5
•Estandares Abiertos
•Transparencia
•Integracion del video
•Integracion con otros elementos
Tuesday, December 13, 11
36. <video>
<source src=”video.mp4” >
<source src=”video.webm” >
<video>
Tuesday, December 13, 11
37. <video>
<source src=”video.mp4” >
<source src=”video.webm” >
<source src=”video.ogg” >
<video>
Tuesday, December 13, 11
38. <video>
<source src=”video.mp4” type="video/mp4">
<source src=”video.webm” >
<source src=”video.ogg” >
<a href=”video.mp4”> tienes IE6 HA HA </a>
<video>
Tuesday, December 13, 11
39. <video>
<source src=”video.mp4” type="video/mp4">
<source src=”video.webm” >
<source src=”video.ogg” >
<a href=”video.mp4”> tienes IE6 HA HA </a>
<video>
Tuesday, December 13, 11
40. <video autoplay>
<source src=”video.mp4” type="video/mp4">
<source src=”video.webm” >
<source src=”video.ogg” >
<a href=”video.mp4”> tienes IE6 HA HA </a>
<video>
Tuesday, December 13, 11
46. <video id=”video”>
<source src=”video.mp4” type="video/mp4">
<source src=”video.webm” >
<source src=”video.oggs” >
<a href=”video.mp4”> tienes IE6 HA HA </a>
<video>
Tuesday, December 13, 11
47. <video id=”video”>
<source src=”video.mp4” type="video/mp4">
<source src=”video.webm” >
<source src=”video.oggs” >
<a href=”video.mp4”> tienes IE6 HA HA </a>
<video>
<script>
var video = document.getElementById(“video”);
video.play()
<script>
Tuesday, December 13, 11
48. Eventos
play
pause
ended
progress
timeUpdate
Tuesday, December 13, 11
51. <video> es HTML5!
http://www.chromeexperiments.com/shaunthesheep
Tuesday, December 13, 11
56. <audio controls>
<source src="audio.mp3" type="audio/mpeg" >
<source src="audio.oga" type="audio/ogg" >
</audio>
Tuesday, December 13, 11
57. <audio controls>
<source src="audio.mp3" type="audio/mpeg" >
<source src="audio.oga" type="audio/ogg" >
<a href="audio.mp3> audio aqui </a>
</audio>
Tuesday, December 13, 11
60. if (myAudio.canPlayType('audio/mpeg')) {
myAudio.setAttribute('src','http://jPlayer.org/audio/mp3/Miaow-07-
Bubble.mp3');
}
if (myAudio.canPlayType('audio/ogg')) {
myAudio.setAttribute('src','http://jPlayer.org/audio/ogg/Miaow-07-
Bubble.ogg');
}
Tuesday, December 13, 11
61. play()
pause()
currentTime
buffered
Tuesday, December 13, 11
62. play()
pause()
currentTime
buffered
Eventos
-timeupdate
-progress
Tuesday, December 13, 11
67. <canvas id="canvas"></canvas>
<script>
var ctx = $('#canvas')[0].getContext("2d");
//the rectangle is half transparent
ctx.fillStyle = "rgba(255, 0, 0, 1)"
ctx.beginPath();
ctx.rect(0, 0, 100, 100);
ctx.closePath();
ctx.fill();
</script>
Tuesday, December 13, 11
71. Tarea
(obligatoria)
Tuesday, December 13, 11
73. Video solo
Controles
formulario
Tuesday, December 13, 11
74. Todo lo de la tarea anterior
+
Video controlado por botones
Animacion CSS
Formulario con correo validado
Diseño bonito *
+ FUUUA!
Tuesday, December 13, 11
