32
Multimedia HTML5 Erik Duval Dept. Computerwetenschappen http://www.cs.kuleuven.ac.be/~erikd/
| Date post: | 14-Dec-2014 |
| Category: |
Documents |
| Upload: | gonzalo-parra |
| View: | 250 times |
| Download: | 1 times |
Multimedia
HTML5
Erik DuvalDept. Computerwetenschappen
http://www.cs.kuleuven.ac.be/~erikd/
2
http://www.slideshare.net/erik.duval
wat denken jullie?
3
“flash assassin”
5
html5
• work-in-progress
• ‘most modern browsers some support’
8
9
10
11
<!DOCTYPE html><html><body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script></body></html> 12
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
13
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
13
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>14
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>14
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="img_flwr.png";
cxt.drawImage(img,0,0);
</script>
15
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="img_flwr.png";
cxt.drawImage(img,0,0);
</script>
15
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</body>
</html>16
<audio>
17
<video><!DOCTYPE html><html><body>
<video controls="controls" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
</body></html>18
• zonder plug-in (flash)
19
21
22
<script type="text/javascript">if (localStorage.n) { localStorage.n=Number(localStorage.n) +1; }else { localStorage.n=1; }document.write("Visits: " + localStorage.n + " time(s).");</script>
<p>Refresh the page to see the counter increase.</p><p>Close the browser window, and try again, and the counter will continue.</p>
23
http://onotakehiko.com/webkitclock/
24
http://thewildernessdowntown.com/
25
26
resources & thx
• @kristofvc, @snakeflash
• +Steven Roose, +Bram Luyten
• http://www.w3schools.com/html5/
• http://www.designzzz.com/getting-to-know-html5/
• http://www.mobilehtml5.com/post/371921120/tutorial-your-first-mobile-html5-app-the-basics
• http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3
• http://html5doctor.com/
• http://www.html5rocks.com/en/
• http://mrdoob.com/92/Google_Gravity
27
Text
28
Questions?
http://erikduval.wordpress.com/twitter: @ErikDuval
