Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First of all you should make sure that the HTML5 tag <code>&lt;video&gt;</code> is supported by Internet Explorer. Only Internet explorer 9 supports it natively see <a href="http://caniuse.com/#search=video" rel="nofollow">HERE</a>, so if you want it to work also with prior versions you need to add the support of HTML5 tags to older versions of Internet Explorer. If you haven't done it already, you can use <a href="http://code.google.com/p/html5shiv/" rel="nofollow">html5shiv</a>. Just add this code in the <code>head</code> of your webpage:</p> <pre><code>&lt;!--[if lt IE 9]&gt; &lt;script src="dist/html5shiv.js"&gt;&lt;/script&gt; &lt;![endif]--&gt; </code></pre> <p>Now you can use the <code>video</code> tag. I give you a solution that uses the video html5 tag first and if that fails it loads the video by using a flash video player without need to use javascript or browser sniffing. Then if even that fails an image placeholder (poster) is displayed and you can allow the visitor of the website to download the video. If you aren't interested in the last part, you can just delete it from the code. As you see in the code, i suggest you to create the video not only in <code>mp4</code> format but also <code>ogg</code> and <code>webm</code>.</p> <p><strong>Format compatibility</strong>:</p> <ul> <li>Internet Explorer 9+ supports Mp4 but not WebM and Ogg.</li> <li>Chrome 6+ supports all the three formats.</li> <li>Firefox 3.6+ supports WebM and Ogg but doesn't support Mp4.</li> <li>Safari 5+ supports Mp4 but doesn't support WebM and Ogg.</li> <li>Opera 10.6+ supports WebM and Ogg but doesn't support Mp4.</li> </ul> <p>That's why you should include all the three formats.</p> <p>I removed the <code>preload</code> attribute because it isn't supported by Internet Explorer.</p> <p>Here the <strong>HTML</strong> code is:</p> <pre><code>&lt;video controls poster="poster.jpg" width="640" height="480"&gt; &lt;source src="my_video.mp4" type="video/mp4" /&gt; &lt;source src="my_video.webm" type="video/webm" /&gt; &lt;source src="my_video.ogv" type="video/ogg" /&gt; &lt;object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="480"&gt; &lt;param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /&gt; &lt;param name="allowFullScreen" value="true" /&gt; &lt;param name="wmode" value="transparent" /&gt; &lt;param name="flashVars" value="config={'playlist':['poster.jpg',{'url':'my_video.mp4','autoPlay':false}]}" /&gt; &lt;img alt="Video" src="poster.jpg" width="640" height="480" title="No video playback capabilities, please download the video below" /&gt; &lt;/object&gt; &lt;/video&gt; &lt;p&gt; &lt;strong&gt;Download video:&lt;/strong&gt; &lt;a href="my_video.mp4"&gt;MP4 format&lt;/a&gt; | &lt;a href="my_video.ogv"&gt;Ogg format&lt;/a&gt; | &lt;a href="my_video.webm"&gt;WebM format&lt;/a&gt; &lt;/p&gt; </code></pre> <p><strong>Server support</strong>:</p> <p>If the MIME type isn't set correctly on the server you may not be able to play the video. If you use Apache server you may add the extension of the video file in <code>/etc/apache</code> or via the <code>AddType</code> configuration directive in <code>httpd.conf</code> .</p> <p><strong>For Ogg</strong>:</p> <pre><code>AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg </code></pre> <p><strong>For WebM</strong>:</p> <pre><code>AddType video/webm .webm </code></pre> <p><strong>For Mp4</strong>:</p> <pre><code>AddType video/mp4 .mp4 </code></pre> <hr> <p>I checked the example on w3schools with Internet Explorer 9. If i switch to Internet Explorer 7 or Internet Explorer 8 it isn't supported. (Because of the HTML5 video tag compatibility issue i talked about before). Again you could solve that by using htmlshiv. </p> <p>It is possible that even if you use Internet Explorer 9, it displays the page in <a href="http://en.wikipedia.org/wiki/Quirks_mode" rel="nofollow">Quirks Mode</a> (compatibility mode, that is as ie7 or ie8). You can avoid that by making sure to use <code>&lt;!DOCTYPE html&gt;</code> without any xml prolog.</p> <p>Besides you could force the browser emulation to the latest version of Internet Explorer by adding this:</p> <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge" &gt; </code></pre> <p>In the <code>head</code> of your HTML page.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload