html5 audio & video
Post on 20-Jan-2015
574 Views
Preview:
DESCRIPTION
TRANSCRIPT
Leccion 7Multimedia
Tuesday, December 13, 11
Tuesday, December 13, 11
y u no told me!!!
Tuesday, December 13, 11
Tuesday, December 13, 11
•Separacion por capas•Modelo de cajas•Selectores•Pseudoelementos•Transición•Transformacion
Tuesday, December 13, 11
Tuesday, December 13, 11
?Tuesday, December 13, 11
Leccion 7Multimedia
Tuesday, December 13, 11
HTML fue creado para mostrar texto e imagenes
Tuesday, December 13, 11
Tuesday, December 13, 11
Tuesday, December 13, 11
•Carga de procesador.•Licencias.•Pulgas extra.•Entorno separado.
Tuesday, December 13, 11
<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
Tuesday, December 13, 11
32%del trafico nocturno
48 horaspor minuto
Tuesday, December 13, 11
Tuesday, December 13, 11
Tuesday, December 13, 11
Porque Audio y Video en HTML5
Tuesday, December 13, 11
•Estandares Abiertos•Transparencia•Integracion del video•Integracion con otros elementos
Porque Audio y Video en HTML5
Tuesday, December 13, 11
<video>
Tuesday, December 13, 11
<video src=”video.mp4”>
Tuesday, December 13, 11
http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm
Tuesday, December 13, 11
<video autoplay>*
* solo escritorio
Tuesday, December 13, 11
<video loop>
Tuesday, December 13, 11
<video controls>
Tuesday, December 13, 11
<video preload>
Tuesday, December 13, 11
<video muted>
Tuesday, December 13, 11
<video poster=”miimagen.png”>
Tuesday, December 13, 11
Codecs y formatos
Tuesday, December 13, 11
Tuesday, December 13, 11
No hay formato universal
Tuesday, December 13, 11
<video src=”video.mp4”>
Tuesday, December 13, 11
<video src=”video.webm”>
Tuesday, December 13, 11
<video src=”video.ogg”>
Tuesday, December 13, 11
<video autoplay controls> <source src=”video.mp4” ></video>
Tuesday, December 13, 11
<video> <source src=”video.mp4” > <source src=”video.webm” ><video>
Tuesday, December 13, 11
<video> <source src=”video.mp4” > <source src=”video.webm” > <source src=”video.ogg” ><video>
Tuesday, December 13, 11
<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
<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
<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
Consideraciones de diseno
Tuesday, December 13, 11
Firefox
Tuesday, December 13, 11
Safari
Tuesday, December 13, 11
Chrome
Tuesday, December 13, 11
Control Programatico
Tuesday, December 13, 11
<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
<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
Eventos
playpauseendedprogresstimeUpdate
Tuesday, December 13, 11
<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
<video> es HTML5!
Tuesday, December 13, 11
<video> es HTML5!
http://www.chromeexperiments.com/shaunthesheep
Tuesday, December 13, 11
Audio
Tuesday, December 13, 11
<audio>
Tuesday, December 13, 11
Tuesday, December 13, 11
<audio src="audio.mp3" controls />
Tuesday, December 13, 11
<audio controls> <source src="audio.mp3" type="audio/mpeg" > <source src="audio.oga" type="audio/ogg" ></audio>
Tuesday, December 13, 11
<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
http://www.mirovideoconverter.com/
Tuesday, December 13, 11
Control Programatico
Tuesday, December 13, 11
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
play()pause()currentTimebuffered
Tuesday, December 13, 11
play()pause()currentTimebuffered
Eventos-timeupdate-progress
Tuesday, December 13, 11
Tuesday, December 13, 11
Canvas
Tuesday, December 13, 11
<canvas>
Tuesday, December 13, 11
<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
http://billmill.org/static/canvastutorial/color.html
Tuesday, December 13, 11
http://www.html5canvastutorials.com/
Tuesday, December 13, 11
http://popwuj.org/juegos/html5/tikal/
Tuesday, December 13, 11
Tarea
(obligatoria)
Tuesday, December 13, 11
Tuesday, December 13, 11
Video solo
Controles
formulario
Tuesday, December 13, 11
Todo lo de la tarea anterior+
Video controlado por botonesAnimacion CSS
Formulario con correo validado Diseño bonito *
+ FUUUA!
Tuesday, December 13, 11
top related