HTML5 Video with Flash Fallback

4/5(1)

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.

The following snippet has cross-browser fallbacks for the opacity element. Keep al users happy with some changes

<!-- 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:

16 juli 2014 @ 13:29Current Revision
Content
The following snippet has cross-browser fallbacks for the opacity element. Keep al users happy with some changes  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