直到现在，仍然没有一项可以让网页上显示视频的标准。大多数的视频都是通过插件（如Flash）来实现播放的，但是并不是所有的浏览器拥有同样的插件。

而伟大的HTML5规定了一个元素<video>来实现这种功能。

<video>支持Ogg、MPEG4、WebM三种视频格式。

我们可以通过下图来看下各种浏览器对这三种格式的支持情况。

（在这里我要代表大部分做前端开发的童鞋们强烈的鄙视下IE，尤其是IE6）

这个属性使用起来很简单，就跟平时我们写其他标签一样。

  1. <video src="movie.ogg"></video>
这个是最基本的写法了。
但是想IE这种傻X浏览器不支持怎么办，不急我们可以在开始标签和结束标签之间放置文本内容，这样不支持该标签的浏览器就可以显示出不支持该标签的信息。
  1. <video src="somevideo.wmv">您的浏览器不支持 video 标签。</video>
有的时候我们不知道该浏览器是否支持这个格式的时候怎么办呢，不要急，video支持多个source元素，我们可以写多个不用的链接文件，浏览器将识别第一个可识别链接。
  1. <video width="320" height="240">
  2. <source src="movie.ogg" mce_src="movie.ogg" type="video/ogg">
  3. <source src="movie.mp4" mce_src="movie.mp4" type="video/mp4">
  4. 你的浏览器不支持video标签。
  5. </video>
下个我们来看下video的各种属性：
  1. <video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop">
  2. <source src="movie.ogg" mce_src="movie.ogg" type="video/ogg" />
  3. <source src="movie.mp4" mce_src="movie.mp4" type="video/mp4" />
  4. 你的浏览器不支持video标签。
  5. </video>
下面我们来看下controls 属性：
controls 属性规定浏览器应该为视频提供播放控件。
如果设置了该属性，则规定不存在作者设置的脚本控件。
浏览器控件应该包括：
  • 播放
  • 暂停
  • 定位
  • 音量
  • 全屏切换
  • 字幕（如果可用）
  • 音轨（如果可用）
在上面例子中我们没有用到preload 属性，下面我们来了解下为什么没有用。
首先preload 属性规定是否在页面加载后载入视频，它有三个值来控制他的功能：auto、meta、none。
auto - 当页面加载后载入整个视频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
下面的纯属扯淡了。。。
在学习的时候发现的一个功能，顺便记录下面。这个JS主要是用来检测浏览器是否支持HTML5中的video标签。
  1. <script type="text/javascript"> 
  3. function checkVideo()
  4. {
  5. if(!!document.createElement('video').canPlayType)
  6. {
  7. var vidTest=document.createElement("video");
  8. oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
  9. if (!oggTest)
  10. {
  11. h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  12. if (!h264Test)
  13. {
  14. document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  15. }
  16. else
  17. {
  18. if (h264Test=="probably")
  19. {
  20. document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
  21. }
  22. else
  23. {
  24. document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
  25. }
  26. }
  27. }
  28. else
  29. {
  30. if (oggTest=="probably")
  31. {
  32. document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";
  33. }
  34. else
  35. {
  36. document.getElementById("checkVideoResult").innerHTML="Well. Some support.";
  37. }
  38. }
  39. }
  40. else
  41. {
  42. document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."
  43. }
  44. }
  45. </script>  
然后在页面里面添加如下代码，样式自己定义：
  1. <div id="checkVideoResult">
  2. <button onclick="checkVideo()">Check</button>
  3. </div>
噢啦，HTML5还是很强大滴，继续学习，哈哈