HTML5 Video with Flash Fallback

4/5(1)

You are viewing an old revision of this post, from 11 juli 2014 @ 15:14. 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&amp;image=__POSTER__.JPG&amp;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:

Changes:

11 juli 2014 @ 15:14Current Revision
Title
Video For Everybody (HTML5 Video with Flash Fallback)  HTML5 Video with Flash Fallback
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&amp;controlbar=over&amp; image=poster.jpg&amp;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 " >&lt;!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --&gt; <pre class="lang:default decode:true " >&lt;!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --&gt;
&lt;!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 --&gt; &lt;!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 --&gt;
&lt;video width="640" height="360" controls&gt; &lt;video width="640" height="360" controls&gt;
&lt;!-- MP4 must be first for iPad! --&gt;  &lt;!-- MP4 must be first for iPad! --&gt;
&lt;source src="__VIDEO__.MP4" type="video/mp4" /&gt;&lt;!-- Safari / iOS video --&gt;  &lt;source src="__VIDEO__.MP4" type="video/mp4" /&gt;&lt;!-- Safari / iOS video --&gt;
&lt;source src="__VIDEO__.OGV" type="video/ogg" /&gt;&lt;!-- Firefox / Opera / Chrome10 --&gt;  &lt;source src="__VIDEO__.OGV" type="video/ogg" /&gt;&lt;!-- Firefox / Opera / Chrome10 --&gt;
&lt;!-- fallback to Flash: --&gt;  &lt;!-- fallback to Flash: --&gt;
&lt;object width="640" height="360" type="application/ x-shockwave-flash" data="__FLASH__.SWF"&gt;  &lt;object width="640" height="360" type="application/ x-shockwave-flash" data="__FLASH__.SWF"&gt;
&lt;!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --&gt;  &lt;!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --&gt;
&lt;param name="movie" value="__FLASH__.SWF" /&gt;  &lt;param name="movie" value="__FLASH__.SWF" /&gt;
&lt;param name="flashvars" value="controlbar= over&amp;amp; image=__POSTER_ _.JPG&amp;amp; file=__VIDEO__.MP4" /&gt;  &lt;param name="flashvars" value="controlbar= over&amp;amp; image=__POSTER_ _.JPG&amp;amp; file=__VIDEO__.MP4" /&gt;
&lt;!-- fallback image. note the title field below, put the title of the video there --&gt;  &lt;!-- fallback image. note the title field below, put the title of the video there --&gt;
&lt;img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"  &lt;img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" /&gt;  title="No video playback capabilities, please download the video below" /&gt;
&lt;/object&gt;  &lt;/object&gt;
&lt;/video&gt; &lt;/video&gt;
&lt;!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want --&gt; &lt;!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want --&gt;
&lt;p&gt; &lt;strong&gt;Download Video:&lt;/strong&gt; &lt;p&gt; &lt;strong&gt;Download Video:&lt;/strong&gt;
Closed Format: &lt;a href="__VIDEO_ _.MP4"&gt;"MP4"&lt;/a&gt;  Closed Format: &lt;a href="__VIDEO_ _.MP4"&gt;"MP4"&lt;/a&gt;
Open Format: &lt;a href="__VIDEO_ _.OGV"&gt;"Ogg"&lt;/a&gt;  Open Format: &lt;a href="__VIDEO_ _.OGV"&gt;"Ogg"&lt;/a&gt;
&lt;/p&gt;</pre> &lt;/p&gt;</pre>

Note: Spaces may be added to comparison text to allow better line wrapping.

Please rate this