Here is my html5fun file
Here is one that I was messin with background colors to dominate the dom.
Here is the css gradients playground
The code is pretty straightforward. This solution to Flash is pretty lame to me. The Flash worked well in every device except the ipad, but now we have to code multiple file types for each audio or video we would wish to embed.
For example: where I would have made one flash movie to use everywhere, and maybe just skipped the I-audience, now I have to encode three html5 compatible files, as well as the flash player fallback. And honestly, the html5 versions just don’t function the same across platforms. We get a slightly different reaction in every browser, when the Flash one would be exactly the same everywhere it was displayed.
<video autoplay="autoplay" controls="controls" preload="auto">
<!-- HTML5 source list: -->
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogv" type="video/ogg">
<source src="video/movie.webm" type="video/webm">
<!-- Fallback to Flash: -->
<object width="720" height="400" type="application/x-shockwave-flash" data="flash-fallback/FlashVideoPlayer.swf">
<param name="movie" value="flash-fallback/FlashVideoPlayer.swf" /> <param name="flashvars" value="file=video/movie.mp4" />
<!-- Fallback image: -->
<img src="videofail.jpg" width="720" height="400" alt="Can't load video." title="No video playback capabilities" />
</object>
</video>
Here are screenshots from a demo I created. Its a small animation , with an audio sound effect that should play on page load. In firefox, the audio is non existent, and even the fallback error isn’t working.
In Internet explorer, the audio plays, but there is an ugly control bar, and the animation won’t play when you click it.
Research on Ipad and android devices coming soon.
Flash is the perfect way to create accents and highlight art and animations on your webpages. Lets start by making a logo for the top of my site here. I would like to have some cool looking text, with animated effects, just to add some spark to my page. Thats what I will go for , a “sparking text” type of effect. It needs to be 627X65. The width is the most important part, as the height will be relative. For this purpose, we are going to use text, with an outline, a gradient fill and a drop shadow.
Now we can try recreate a similar text effect using pure html5. Here is a test of Apple’s “Hype”, an HTML 5 authoring program for graphics and animation. Their answer to the “hype” that they feel flash is riding on. HTML is a text markup language. And it does a great job of marking up the text. you can have fonts, and italics. Trying to make this text markup language perform animations and add graphical effects such as drop shadow and opacity is not what it was made for.
Fire up flash. bust out some cool text. add some sparking effects on touch. export it out and put in a page. now lets test the page on several devices including pc, mac and mobile.
