Downloaded 24 times
![<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](https://image.slidesharecdn.com/html5clase7-111213204140-phpapp02/75/Html5-Audio-video-67-2048.jpg)
Uploaded byCarlos Solis
Html5 Audio & video
The document discusses HTML5 multimedia features such as video, audio, and canvas. It covers how to embed video and audio using <video> and <audio> tags, provides code examples for controlling playback and accessing media properties with JavaScript, and discusses related topics like audio/video formats and codecs, embedding YouTube videos, and using the <canvas> tag. It also assigns multimedia-related homework for students to create a video player with controls, animation, and validated form submission.
Html5 Audio & video
- 1. Leccion 7 Multimedia Tuesday, December 13, 11
- 2.
- 3. y u notold me!!! Tuesday, December 13, 11
- 4.
- 5. •Separacion por capas •Modelo de cajas •Selectores •Pseudoelementos •Transición •Transformacion Tuesday, December 13, 11
- 6.
- 7.
- 8. Leccion 7 Multimedia Tuesday, December 13, 11
- 9. HTML fue creadopara mostrar texto e imagenes Tuesday, December 13, 11
- 10.
- 11.
- 12. •Carga de procesador. •Licencias. •Pulgas extra. •Entorno separado. 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
- 14.
- 15. 32% del trafico nocturno 48 horas por minuto Tuesday, December 13, 11
- 16.
- 17.
- 18. Porque Audio yVideo en HTML5 Tuesday, December 13, 11
- 19. Porque Audio yVideo en HTML5 •Estandares Abiertos •Transparencia •Integracion del video •Integracion con otros elementos Tuesday, December 13, 11
- 20.
- 21.
- 22. http://jplayer.org/video/webm/ Big_Buck_Bunny_Trailer.webm Tuesday, December 13, 11
- 23. <video autoplay> * * solo escritorio Tuesday, December 13, 11
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. Codecs y formatos Tuesday,December 13, 11
- 30.
- 31. No hay formatouniversal Tuesday, December 13, 11
- 32.
- 33.
- 34.
- 35. <video autoplay controls> <source src=”video.mp4” > </video> 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
- 41. Consideraciones de diseno Tuesday,December 13, 11
- 42.
- 43.
- 44.
- 45.
- 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
- 49. <iframe class="youtube-player" type="text/html" width="640" height="385" src="http:// www.youtube.com/embed/VIDEO_ID" frameborder="0"> </iframe> Tuesday, December 13, 11
- 50. <video> es HTML5! Tuesday,December 13, 11
- 51. <video> es HTML5! http://www.chromeexperiments.com/shaunthesheep Tuesday, December 13, 11
- 52.
- 53.
- 54.
- 55. <audio src="audio.mp3" controls/> 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
- 58.
- 59.
- 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
- 63.
- 64.
- 65.
- 66.
- 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
- 68.
- 69.
- 70.
- 71. Tarea (obligatoria) Tuesday, December 13, 11
- 72.
- 73. Video solo Controles formulario Tuesday, December 13, 11
- 74. Todo lo dela tarea anterior + Video controlado por botones Animacion CSS Formulario con correo validado Diseño bonito * + FUUUA! Tuesday, December 13, 11