Flash video player VS HTML 5 Video_问答_开发者

开发者 https://www.devze.com 2023-01-03 10:00 出处：网络

I need to add a video player to play a video on a webpage. usually i use Flash player with the help of swfobject library. which works if flash player and javascript both are enabled.

I'm currently using XHTML 1.0 strict doctype.

My question is can i just change my doctype to HTML 5 doctype and add Video player using HTML 5 video. for browser wh开发者_如何学编程ich do not support HTML5 i can a a javascript.

in this condition in supported browser Video will work without Flash player and javascript and in non-supported browser will work with js support.

Is this possible? Is this a good idea?

"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.

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!).