ansaurus

Question

Answer 1

+1 A:

"HTML5" (in using HTML5, I am lumping together the major browser vendor's implementations so far) does not have an agreed-upon codec for <video> yet, so different browsers use different codecs; some proprietary, some not. You can use an HTML5 doctype, and use a <video> now, but you'll need to have H.264 codec for Safari, Ogg/Theora for Firefox, and Flash as a fallback if none of the above. Oh, and don't forget an image if Flash isn't installed, and text if images are disabled, and a hand-written letter to the user if...

So something like...

<!DOCTYPE html>
...
<video>
    <source src='your_movie.ogv'  />
    <source src='your_movie.m4v'  />
</video>

In other news, I enjoyed this post on JW's blog called Safari and Quicktime are not Standards.

Typeoneerror 2010-06-12 10:17:09

how youtube , vimeo etc giving HTML 5 player?

metal-gear-solid 2010-06-12 14:08:40

With H.264 support and experimental builds of Opera and Firefox: http://www.youtube.com/html5

Typeoneerror 2010-06-12 16:41:54

Do you mean the automatic change over when youtube is looked at from an iOS device ?

phwd 2010-06-12 17:07:05

Answer 2

+1 A:

first of all you might want to take a look at http://camendesign.com/code/video_for_everybody if you haven't come across it already.

anyways, this should work if you want to provide a custom flash alternative:

<video width="..." height="..." controls="controls" preload="none">
  <source src="video/demo.mp4"  type="video/mp4" />
  <source src="video/demo.webm"  type="video/webm" />
  <source src="video/demo.ogv"  type="video/ogg" />
  <span id="flashAlternative">what, no flash+no html5? crazy!</span>
</video>
<script>
  swfobject.embedSWF( ..., "flashAlternative", ... ); 
</script>

obviously, if you want to use a youtube/vimeo/... video as alternative you just place the embed code instead of the script tag:

<video width="..." height="..." controls="controls" preload="none">
  <source src="video/demo.mp4"  type="video/mp4" />
  <source src="video/demo.webm"  type="video/webm" />
  <source src="video/demo.ogv"  type="video/ogg" />
  <!-- embedding code here -->
</video>

both of this solutions prefer html5 video over the flash video, if you don't want to pay for loads of bandwidth you might prefer to show the youtube video to all the people who have flash, and only fallback to html5 if that's not available. that'll look something like this then:

<object type="application/x-shockwave-flash" width="..." height="..." data="...">
    <param name="movie" value="..." />
    <video width="..." height="...">
        <source src="..." type="video/mp4" />
        <source src="..." type="video/webm" />
        <source src="..." type="video/ogg" />
        <!-- here comes the alternative for people who have neither flash, nor html5 -->
    </video>
</object>

please notice that you cannot just copy the embed code from youtube/video and smush html5 video inside, you need to modify it so it looks like the above (data and movie attribute both specify the source of the swf file, no embed tag needed!).

kritzikratzi 2010-07-08 11:07:12

for completeness: i've only tested the second and third example, you might need to modify the swfobject example a bit to make it work, but you should get the idea!

kritzikratzi 2010-07-08 11:12:32

ansaurus

tags:

views:

answers:

Flash video player VS HTML 5 Video.....

related questions