I just uploaded a new tutorial that shows you how to provide an HTML5 video fallback option for devices that do not support the Flash Player. The tutorial also shows you how to use the new Flash Media Playback component for quickly adding video to your websites. If getting your video out to the largest number of people is your goal, providing an HTML5 fallback is an absolute necessity.
New Tutorial on Flash to HTML5 Video Fallback
Commentary
Leave a Comment
About the Author
Lee Brimelow is a Platform Evangelist at Adobe and lives in the SF Bay Area.
Upcoming Appearances
Great, good to know! Looks really simple.
This is something EVERY web developer should know how to do, especially the Flashers out there.
Thanks for the great video Lee.
uhh you do realize swfobject has been the default flash renderer in Dreamweaver since dreamweaver CS4 right?
Thanks Lee,
This tutorial is good advice for all Flash developers.
@jared does that have anything to do with this post? Uhhhh, come on man.
@jared yes it does use SWFObject but it does static publishing, not dynamic which I prefer.
Hi Lee,
Great tutorial – and a very easy solution to getting the video on Apples devices, and still get to use flash as a primary.
One question though. I have heard that mp4 is not allways interchangeable, as flash supports both baseline, main and high AVC profiles, and the iPhone i believe only supports baseline (please correct me if I’m wrong). Could you touch a bit on the subject of encoding settings?
Thanks in advance
Hmm.. I went to the link that is in the video http://leebrimelow.com/video/ with my iPod touch and it doesn’t like it.
I see your red flash logo with a circle with crosshatch (no play) in front of it. any clues? I am up to date on software.
Thanks
It looks like the Flash Media Playback component is running into a crossdomain error trying to load the poster image. Is the Flash Media Playback component set to look for a crossdomain.xml by default?
Although I consider myself a Flash developer, I prefer things the other way round, which would be a HTML5 player with Flash fallback for those who cannot playback HTML5 video yet. There are plenty of HTML5 video player scripts with Flash fallback out there which can be downloaded e.g. here: http://www.video-flash.de/index/html5-videoplayer-uebersicht2/
Oh, and if you download the HTML5 pack from Adobe for Dreamweaver and set the doctype to HTML5, your site will even validate correctly
I can’t seem to access the video on Chrome or Firefox. Only on IE.
On Chrome I can hear the audio, but there’s no image.
On Firefox, nothing happens. Just a gray background.
On IE8, audio, video and controllers work.
I didn’t watch the entire video as I refurse to keep IE open for more than 30 seconds. I’ll come back later to see if it works on proper browsers.
Cheers!
cheers lee! guess your approach is definitely the right one; i prefer to offer the feature-rich flash-version instead of the fallback HTML5-version too.
seems i ran into a strange issue though: i hear the audio of BOTH versions in my browser
mac OSX -> Chrome 5.0.375.125 with FlashPlayer 10,1,53,64
guess the browser is actually initializing both versions of the player…
hth!
Ironically, I couldn’t get anything to load in the page in Firefox 3.6.8 (blank white area where the video should be), and when I opened up Chrome, both videos started playing, with Flash rendering on the top layer, essentially not allowing me to stop the HTML5 version. Just rebooted my PC as well.
Sorry guys my SWFObject code was jacked up. It should now be viewable in all browsers.
The zip file contains only the image folder
Sorry, last comment was meant for the Mobile Website entry
I’m also using Chrome 5.0.375.125 beta and I’m still getting both versions playing at the same time.
@pete yes you’re right. I guess if you have HTML5 video set to autoplay it will play even if you remove it from the DOM. I turned off autoplay to fix it. Thanks!
Hi,
in the video you say that the code is also supported by mobile phones with flash lite or ? I use a Sony Ericsson Aino with Flash Lite 3.0 and Opera mini 5.0 but the code doesn´t work.
Your Tutorials and your Blog are great.
best regards, Jojo
@jojo no I said that this particular video player won’t work with FlashLite. That is because the Flash Media Playback player uses some Flash 10.1 features. Thanks.
Ok sry, I got that wrong. On my Ipad it works.
regards, Jojo
Hey Lee,
Thanks for the thorough demo.
Just wondering: I am unable to find the Firefox add-on/extension (puzzle piece) that you used in your demo to disable all plug-ins.
Can you provide a link?
Thanks in advance
T
I was wondering if anyone was getting a Security Sandbox violation when trying this out?
I’ve only had it in IE, but here’s the error:
SecurityError: Error #2123: Security sandbox violation: Loader.content: http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf/DYNAMIC/1 cannot access http://www.clintmilner.com/video/poster.jpg. No policy files granted access.
at flash.display::Loader/get content()
at org.osmf.elements::ImageElement/applySmoothingSetting()
at org.osmf.elements::ImageElement/processReadyState()
at org.osmf.media::LoadableElementBase/onLoadStateChange()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at org.osmf.traits::LoadTrait/loadStateChangeEnd()
at org.osmf.traits::LoadTrait/setLoadState()
at org.osmf.traits::LoadTrait/onLoadStateChange()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at org.osmf.traits::LoaderBase/updateLoadTrait()
at Function/()
Thanks for sharing this, Lee. I hope to implement this for a client, but I can’t seem to play your demo on Firefox, Safari and an older iPhone:
On OS X 10.6.4, it plays on:
Chrome 5.0.375.126
It does not on:
Firefox 3.6.3
Safari 5.0.1
Also, it does not on an iPhone 3G iOS 4.0.1
Hope this helps,
t
Burns wrote earlier: “One question though. I have heard that mp4 is not allways interchangeable, as flash supports both baseline, main and high AVC profiles, and the iPhone i believe only supports baseline (please correct me if I’m wrong). Could you touch a bit on the subject of encoding settings?”
Can someone answer this question? Currently I have been using F4V for Flash videos and MP4 for the HTML5 fallback. Would I be better off making everything MP4 instead?