You are viewing an old revision of this post, from 16 juli 2014 @ 13:29. See below for differences between this version and the current revision.
We all know it is very important to have HTML5 video fallbacks to keep all users happy
<!-- 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>
Post Revisions:
- 14 oktober 2014 @ 10:12 [Huidige revisie] by Dave Zoontjes
- 15 augustus 2014 @ 12:52 by Dave Zoontjes
- 15 augustus 2014 @ 12:50 by Dave Zoontjes
- 16 juli 2014 @ 13:30 by Dave Zoontjes
- 16 juli 2014 @ 13:29 by Dave Zoontjes
- 16 juli 2014 @ 13:29 by Dave Zoontjes
- 16 juli 2014 @ 13:29 by Dave Zoontjes
- 11 juli 2014 @ 15:14 by Dave Zoontjes
- 11 juli 2014 @ 15:14 by Dave Zoontjes
Changes:
16 juli 2014 @ 13:29 | Current Revision | ||
---|---|---|---|
Content | |||
We all know it is very important to have HTML5 video fallbacks to keep all users happy | The following snippet has cross-browser fallbacks for the HTML5 video element. Keep al users happy with some changes | ||
Demo: | |||
<video width="640" height="360" controls="" autoplay=""> | |||
<!-- MP4 must be first for iPad! --> | |||
<source src="http://clips.vorwaerts- gmbh.de/VfE_html5.mp4" type="video/mp4"><!-- Safari / iOS, IE9 --> | |||
<source src="http://clips.vorwaerts- gmbh.de/VfE.webm" type="video/webm"><!-- Chrome10+, Ffx4+, Opera10.6+ --> | |||
<source src="http://clips.vorwaerts- gmbh.de/VfE.ogv" type="video/ogg"><!-- Firefox3.6+ / Opera 10.5+ --> | |||
<!-- fallback to Flash: --> | |||
<object width="640" height="360" type="application/ x-shockwave-flash" data="player.swf"> | |||
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> | |||
<param name="movie" value="player.swf"> | |||
<param name="flashvars" value="autostart= true&controlbar=over& image=poster.jpg&file= http://clips.vorwaerts-gmbh.de/ VfE_flash.mp4"> | |||
<!-- fallback image --> | |||
<img src="poster.jpg" width="640" height="360" alt="Big Buck Bunny" title="No video playback capabilities, please download the video below"> | |||
</object> | |||
</video> | |||
Code: | |||
<pre class="lang:default decode:true " ><!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --> | <pre class="lang:default decode:true " ><!-- 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 --> | <!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 --> | ||
<video width="640" height="360" controls> | <video width="640" height="360" controls> | ||
<!-- MP4 must be first for iPad! --> | <!-- MP4 must be first for iPad! --> | ||
<source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video --> | <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video --> | ||
<source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 --> | <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 --> | ||
<!-- fallback to Flash: --> | <!-- fallback to Flash: --> | ||
<object width="640" height="360" type="application/ x-shockwave-flash" data="__FLASH__.SWF"> | <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 --> | <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> | ||
<param name="movie" value="__FLASH__.SWF" /> | <param name="movie" value="__FLASH__.SWF" /> | ||
<param name="flashvars" value="controlbar= over&amp; image=__POSTER_ _.JPG&amp; file=__VIDEO__.MP4" /> | <param name="flashvars" value="controlbar= over&amp; image=__POSTER_ _.JPG&amp; file=__VIDEO__.MP4" /> | ||
<!-- fallback image. note the title field below, put the title of the video there --> | <!-- fallback image. note the title field below, put the title of the video there --> | ||
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" | <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" | ||
title="No video playback capabilities, please download the video below" /> | title="No video playback capabilities, please download the video below" /> | ||
</object> | </object> | ||
</video> | </video> | ||
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want --> | <!-- 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> | <p> <strong>Download Video:</strong> | ||
Closed Format: <a href="__VIDEO_ _.MP4">"MP4"</a> | Closed Format: <a href="__VIDEO_ _.MP4">"MP4"</a> | ||
Open Format: <a href="__VIDEO_ _.OGV">"Ogg"</a> | Open Format: <a href="__VIDEO_ _.OGV">"Ogg"</a> | ||
</p></pre> | </p></pre> |
Note: Spaces may be added to comparison text to allow better line wrapping.