Your SlideShare is downloading. ×
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5: where flash isn't needed anymore

2,582

Published on

Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub. …

Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub.

Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game.

Are browser ready to rock without Flash?

2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total Views
2,582
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
2
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5 vs. FlashWhere Flash isn’t needed anymore
  • 2. Remy Sharp@remSometimes doesflash-ing
  • 3. 1. video & Audio2. Real-time3. Graphics
  • 4. Video killed theradio Flash star?
  • 5. Who would jump to create another video player?
  • 6. IE9 & all others supported
  • 7. <video src="dizzy.mp4"></video>
  • 8. <!DOCTYPE html><html lang="en"><head> <meta charset=utf-8 /> <title>Video Example</title></head><body><video src="dizzy.mp4" controls></video></body></html>
  • 9. <video src="dizzy.mp4" controls></video>
  • 10. <video controls> <source type="video/mp4" src="dizzy.mp4" codecs="avc1.42E01E, mp4a.40.2"> <source type="video/webm" src="dizzy.webm" codecs="vp8, vorbis"> <source type="video/ogg" src="dizzy.ogv" codecs="theora, vorbis"></video>
  • 11. <video controls> <source type="video/mp4" src="dizzy.mp4"> <source type="video/webm" src="dizzy.webm"> <source type="video/ogg" src="dizzy.ogv"></video>
  • 12. <video controls> <source src="dizzy.mp4"> <source src="dizzy.webm"> <source src="dizzy.ogv"></video>
  • 13. <video controls> <source src="dizzy-hd.mp4" media="(min-device-height: 720px)"> <source src="dizzy-regular.mp4"> <...></video>
  • 14. Video for Everybody<video width="640" height="360" poster="dizzy.jpg" controls> <source src="dizzy.mp4" type="video/mp4" /> <source src="dizzy.web" type="video/webm" /> <source src="dizzy.ogv" type="video/ogg" /><!--[if gt IE 6]> <object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><! [endif]--><!--[if !IE]><!--> <object width="640" height="375" type="video/quicktime" data="dizzy.mp4"> <!--<![endif]--> <param name="src" value="dizzy.mp4" /> <param name="showlogo" value="false" /> <object width="640" height="380" type="application/x-shockwave-flash" data="player.swf?image=dizzy.jpg&amp;file=dizzy.mp4"> <param name="movie" value="player.swf?image=dizzy.jpg&amp;file=dizzy.mp4" /> <img src="dizzy.jpg" width="640" height="360" alt="Title of video" title="No video playback capabilities, please download the video below" /> </object><!--[if gt IE 6]><!--></object><!--<![endif]--></video><p>Download Video: <a href="dizzy.mp4">High Quality "MP4"</a> | <a href="dizzy.ogv">Low Quality "OGG"</a></p> http://camendesign.com/code/video_for_everybody
  • 15. Scripting
  • 16. var video = document.getElementById(myVideo);if (video.paused) { video.play();}
  • 17. var video = document.getElementById(myVideo);if (video.paused) { video.play();}// position & asTime defined elsewherevideo.addEventListener(timeupdate, function () { positon.innerHTML = asTime(this.currentTime);}, false);
  • 18. Simple APIMethods: play(), pause(), canPlayType(mime)Properties: currentTime, paused, duration,loop, autoplay, muted, volume, etcEvents: loadedmetadata, canplay, progress,play, pause, seeking, timeupdate, etc
  • 19. Fullscreen? Warning! User agents should not provide a public API tocause videos to be shown full-screen. A script, combined with acarefully crafted video file, could trick the user into thinking asystem-modal dialog had been shown, and prompt the user fora password. There is also the danger of "mere" annoyance, withpages launching full-screen videos when links are clicked orpages navigated. Instead, user-agent specific interface featuresmay be provided to easily allow the user to obtain a full-screenplayback mode.
  • 20. 1. No plugins required2. Simple API: play, pause, etc3. Video & Audio: the same4. HTML & CSS - no compile or different skills required
  • 21. 1. Codecs2.Our friend IE
  • 22. Flash will be neededas a backup to video for a while yet.
  • 23. Realtime
  • 24. http://rem.im/collab-drawing.html
  • 25. WebSocket•Low latency• Bi-directional• No same-original rules• Chrome, Safari, MobileSafari & Firefox• Fallback on Flash...ironically
  • 26. WebSocketvar ws = new WebSocket("ws://myserver.com/");ws.onmessage = function (event) { var data = JSON.parse(event.data);};ws.onclose = function () {};ws.onopen = function () {};
  • 27. ws.onmessage = function (event) { var data = JSON.parse(event.data);}; All message data lives here
  • 28. EventSource•Server pushed events• Same-original rules apply• Can fallback with JavaScript
  • 29. EventSourcevar es = new EventSource("/x-service/");es.onmessage = function (event) { var data = JSON.parse(event.data);};es.onopen = function () {};
  • 30. Graphics
  • 31. 2D Graphics
  • 32. Canvas API
  • 33. HTML5<canvas></canvas>var canvas = document.getElementsByTagName(‘canvas’)[0], ctx = canvas.getContext(‘2d’); 2D drawing API
  • 34. canvas.getContext(‘2d’)
  • 35. Google Analytics - Flash chartsInteractive Demo - Canvas charts
  • 36. function canvas(w, h) { var ctx = document.createElement(canvas).getContext(2d), canvas = ctx.canvas; canvas.width = w; canvas.height = h; return ctx;}var rainbow = canvas(100, 1), rainbowGrad = createRainbow(rainbow);rainbow.fillStyle = rainbowGrad;var imageData = rainbow.getImageData(0, 0, 100, 1), pixels = imageData.data;// loop over each pixel and create the dot imagefor (var i = 0; i < pixels.length; i += 4) { createPoint(pixels, i);}
  • 37. function createPoint(pixels, i) { // remove shadow var dot = canvas(24, 24); dot.shadowBlur = 0; dot.shadowColor = rgba(0,0,0,0); // outer white circle dot.fillStyle = #fff; dot.fillStyle = rgb( + [ dot.arc(12, 12, 10, 0, Math.PI * 2, true); pixels[i], // red pixels[i+1], // green // drop shadow pixels[i+2] // blue dot.shadowBlur = 2; ].join(,) + ); dot.shadowColor = rgba(0,0,0,.7); dot.shadowOffsetX = 2; // start inner circle dot.shadowOffsetY = 2; dot.beginPath(); dot.arc(12, 12, 8, 0, Math.PI*2, true); // fill outer ring dot.fill(); // fill inner circle dot.fill(); new google.maps.MarkerImage( dot.canvas.toDataURL(image/png) ); }
  • 38. new google.maps.MarkerImage( dot.canvas.toDataURL(image/png));
  • 39. 1. Timer paints video into canvas2. Reads all pixels for bright spots3. Translates to the vector4. Draws selected input http://blog.mozbox.org/post/2009/04/12/Firefox-35%3A-a-new-experiment-with-Canvas-Video
  • 40. 1. Flash and canvas share the same black box features2. People will abuse the technology
  • 41. ScalableVectorGraphics
  • 42. ...using Flash!
  • 43. Raphaël.js
  • 44. 3D
  • 45. CSSYeah, 3D CSS.
  • 46. #canvas { -webkit-perspective: 800; -webkit-perspective-origin: 50% 20em;}#rubiks { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(15deg) rotat}#rubiks .face1 { -webkit-transform: rotateX(90deg) trans}#rubiks .face2 { /* front */ -webkit-transform: translateZ(10.8em);}#rubiks .face3 { -webkit-transform: rotateY(90deg) trans}#rubiks .face4 { /* back face */ -webkit-transform: rotateY(180deg) tran}#rubiks .face5 { -webkit-transform: rotateY(-90deg) tran
  • 47. WebGL
  • 48. Mobile?
  • 49. ...or just aska question :)- @rem

×