Video For Everybody (HTML5 Video with Flash Fallback)
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video -->
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>A complete explanation at Kroc Camen's site, the originator of this technique.
Thank you! (:
Really nice implementation, easiest thing to forget about HTML5 video is the different encoding formats for the video file other than that its dead simple! Thanks!
I’m just starting to look into html5 video. Is there a way to pass it variables like you can with Flash? A common scenario of mine is having a video that plays in a .swf, and I pass in a variable, maybe the customer’s name, dynamically, so each person that follows a link to a PURL (personalized URL) will be greeted by name in the video. Is there a similar way to pass in dynamic data to html5 video?
Steve,
Were you able to find an answer to this question? I am looking to do the exact same thing as you are (ie: passing a video custom variables) and was wondering if html5 video could do the trick.
bump. would also like an answer to this.
What is the best video-Format (file) on mobiles (iPhone/Android/WinPhone)?
not for download, more than view in a browser (like boat/firefox/opera).
Or exist there any special converters or parameters?
It is possible to view diefferent videos on Desktop/iPad and iPhone/Android etc.. by CSS3 selectors. So it is possible to get the existing and running videos für Desktops an another for Mobiles.
Any hints / Helps?
Thanks for answer.
Awesome… It works in Mobile Browsers too..
One thing to watch out for: The
<img>tag’s resource will be downloaded on modern browsers as well, even though it is not displayed.If it is also being used as the
posterattribute (which in the case above it isn’t), then no harm is done. If it isn’t, then it is being downloaded for nothing.Hi,
Thanks a lot for this clear explanation. It leaves me however with just 1 question: where does the player.swf file come from? I understand this is an flash file that plays the movie. Does it have to be made again for each movie or is there a generic version around and if so where can I download it or do I need to buy a flash development environment (not very use ful for me…)? Could you please explain this aspect a bit more for me?
Thanks and regards, Paul.