<!-- 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.
You are asking the wrong question. The page displaying the video could take parameters and display stuff. The video player is just for video.
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.
Just use an old version (from when it was free?) of jwplayer’s player.swf, or find another one.
Hello All,
I have recently implemented the above so I can try and get to grips with HTML5 video. It works on all browsers, but doesn’t play on the iPad. The MP4 file is ‘first’ in the queue. If anybody could shed any light on the issue I would be very grateful.
Jag
Thank you for the code, is there a way of making the movie ‘autostart’. Thanx AdRog
Just pop autoplay in the video tag after where he has put ‘controls’
Really awesome… It works in Mobile Browsers too..
Any way to make this work when there is no ogg file available? I need to fallback from flash to html5 for iPad iPhone etc, and I cannot use frames. As far as i can see firefox won’t play the flash video at all.
Thanks for the tutorial, you guys should also make sure to check out all the attributes for the video element, that’s where the fun truly begins with a mixture of jquery.
I just want to warn that the object fallback inside the video tag just doesn’t work in Firefox.
I’m working in a project aimed to offline use, where it’s important to keep the full project weight as small as possible, so I tried a solution based on the code in this post in order to avoid the necessity to load an ogv video file.
If you want to show html5 video for any browser that does support mp4 video, and play the same video file via flash in browsers that doesn’t support it (firefox), don’t use that code!: Firefox won’t show the flash player.
You’d better detect mp4 support (because there is a possibility that Firefox one day start supporting mp4, as happened with Opera), and then serve the video tag or the flash player fallback, as needed.
Hello,
I am simply trying to add video in web. I am using mp4 format but it doesn’t display on safari. The funny part is I am not getting any error.In my page there is just a video element and it seems blank on run time.(It works safari/chrome/IE). My code as below.
Thanks!
http://codepen.io/anon/pen/vEwgBK.html
This stopped working for Safari right?
Is there any new hack for safari browser?
Sorry for my english, spanish speaker
Hello @Gabriel,
After i installed quicktime for safari, it worked. Safari support html5 video tag with quicktime for windows users. Here you can find more detail here: http://superuser.com/questions/870133/html5-video-tag-not-supported-in-safari-5-1-on-windows-7
Hello, I am using the code below to play a 19 second clip. Autoplay occurs perfectly on a computer but on cellular devices I have a play button that must be clicked to begin the clip. Any workaround to auto play on mobile devices?
Thanks in advance!
…
<!–
<!–
…