HTML5 is awesome. Well, it will be awesome when it\'s finally ready. Probably.
The bad news is that by the time the W3C have finished monkeying with HTML5, I\'ll probably have given up on the web as a whole and taken up meat goat farming.
The good news (for you, me and the goats) is that there\'s no need to wait for a lot of the functionality that HTML5 promises; we can start using them right now. In this session I\'m going to show you how you can steal these features from the Flash Player and use them in your standards-based sites or applications, without even a sniff of Flash on the page.
5. I am a Yahoo!
http://flickr.com/photos/niallkennedy/
Senior Front-End Engineer on the Front-End Architecture team
Catalyst for this talk - standards vs. Flash.
6. I am an idiot
http://flickr.com/photos/thevoicewithin/
11. Lots of nice features
http://flickr.com/photos/hassman/
Video and audio support
Push-technology (Web Sockets)
Many other great features
12. Not ready until 2022
2022 date taken from WHATWG roadmap
Some HTML5 features supported in bleeding-edge nightly build browsers
Still won’t be suitable for general use for a good few years
16. How does this work?
HTML
HTML lives in browser-land
Limited in functionality by the browser’s capabilities
17. How does this work?
SWF HTML
SWF playing in Flash Player has access to advanced features
How can we get the two to communicate?
18. How does this work?
SWF HTML
JavaScript
JavaScript is can interact with HTML/DOM
19. How does this work?
Text
SWF HTML
JavaScript
We need to find something to communicate between JS and SWF
20. How does this work?
Text
SWF HTML
alInt erface
Extern
class
JavaScript
The ExternalInterface class provides a Flash-to-JS bridge
Available since Flash Player 8
21. How does this work?
Invis
ible
Flash
SWF HTML
alInt erface
Extern
class
JavaScript
Now the Flash content doesn’t even have to be visible on the page.
Show ’01 ExternalInterface’ demo
23. Video playback
In HTML5 this is implemented by the <video> element
YouTube etc. have been using Flash for video for years
Use out-of-the-box solution like JW FLV Media Player
24. Audio playback
In HTML5 this is implemented by the <audio> element
Latest WebKit nightly also has Audio JS class for pure JS audio
Scott Schiller’s SoundManager library uses Flash to play JS-controlled audio
25. Multiple file upload
Part of Web Forms, but missing in HTML5 spec
Flash-based solutions include SWFUpload and YUI Uploader
Flash Player 10 introduces clickjacking security restriction that means file browse dialog can
only be invoked by a click on the Flash movie itself (not through ExternalInterface)
YUI Uploader allows creation of transparent overlay on links to get around this
Used on the current Flickr Web Upload page
26. Cross-frame
communication
HTML5 introduces window.postMessage method and ‘message’ event
Flash allows LocalConnection objects to communicate
Using LocalConnections in conjunction with ExternalInterface allows HTML5-like functionality
NOW
Show ’05 Cross Frame Comms’ example and code
27. Offline storage
HTML5 introduces localStorage object and methods
Different to cookies - not sent to/from the server
Flash has has Local Shared Object for client-side data storage, so it’s easy to build emulation
layer
Show ’06 Offline Storage’ example and code
28. Socket-based
communication
Client side, comet is a mess of browser hacks - a virtual house of cards
HTML5 introduces Web Sockets for bidirectional communication
Flash has both XML and raw (byte-based) socket support
Show ’07 Sockets’ example and code
