Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Check out <a href="http://diveintohtml5.ep.io/video.html" rel="nofollow">http://diveintohtml5.ep.io/video.html</a> for great info on HTML5 video and different formats.</p> <p>Simplified short answer: Firefox 4 supports Ogg (Theora/Vorbis) and WebM; Safari (desktop and mobile) supports MP4 (H.264/AAC). Try using the HTML5 <code>&lt;video&gt;</code> tag like this:</p> <pre><code>&lt;video width="320" height="240" controls&gt; &lt;source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt; &lt;source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'&gt; &lt;source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'&gt; &lt;/video&gt; </code></pre> <p>(Example from site linked above. Seriously, it's a really good read, and it will also tell you how to make sure your video <em>does</em> work in IE, Chrome, etc.)</p> <p><strong>EDIT</strong> If you absolutely need to only use one video format, your best bet is probably MP4/M4V with H.264 video and AAC audio. Safari (desktop and mobile) can play it in the <code>&lt;video&gt;</code> tag, and Firefox will be able to play it in a Flash container. It's not ideal, because I think you'll have to do some browser sniffing to make sure iOS doesn't get Flash and Firefox does, but you'll want something like this:</p> <pre><code>&lt;!-- Safari and iOS --&gt; &lt;video width="320" height="240" poster="poster.jpg" controls&gt; &lt;source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt; &lt;/video&gt; &lt;!-- Firefox / other --&gt; &lt;object width="320" height="240" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"&gt; &lt;param value="player.swf"&gt; &lt;param value="true" name="allowfullscreen"&gt; &lt;param value="always" name="allowscriptaccess"&gt; &lt;param value="file=video.mp4&amp;amp;image=poster.jpg" name="flashvars"&gt; &lt;embed width="320" height="240" flashvars="file=video.mp4&amp;amp;image=poster.jpg" allowfullscreen="true" allowscriptaccess="always" src="player.swf" type="application/x-shockwave-flash" &gt; &lt;/object&gt; </code></pre> <p>Even if you go this route, though, I'd still read the Dive Into HTML5 page for more info about the appropriate codecs to use, how to encode the video, and various problems to look out for.</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.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. 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