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

而伟大的HTML5规定了一个元素

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

HTML5 学习笔记（一）- video_第1张图片

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

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

   
   
   
   
    
    
    
    
    
  1. <video src="movie.ogg">video>  
    2.

这个是最基本的写法了。

但是想IE这种傻X浏览器不支持怎么办，不急我们可以在开始标签和结束标签之间放置文本内容，这样不支持该标签的浏览器就可以显示出不支持该标签的信息。 

   
   
   
   
    
    
    
    
    
  1. <video src="somevideo.wmv">您的浏览器不支持 video 标签。video>  
    2.

有的时候我们不知道该浏览器是否支持这个格式的时候怎么办呢，不要急，video支持多个source元素，我们可以写多个不用的链接文件，浏览器将识别第一个可识别链接。

   
   
   
   
    
    
    
    
    
  1. <video width="320" height="240">   
    2. 
    
    
    
    
  2.   <source src="movie.ogg" mce_src="movie.ogg" type="video/ogg">   
    3. 
    
    
    
    
  3.   <source src="movie.mp4" mce_src="movie.mp4" type="video/mp4">   
    4. 
    
    
    
    
  4. 你的浏览器不支持video标签。   
    5. 
    
    
    
    
  5. video>  
    6.

下个我们来看下video的各种属性：

HTML5 学习笔记（一）- video_第2张图片

   
   
   
   
    
    
    
    
    
  1. <video width="320" height="240" controls="controls" autoplay="autoplay" loop="loop">   
    2. 
    
    
    
    
  2.   <source src="movie.ogg" mce_src="movie.ogg" type="video/ogg" />   
    3. 
    
    
    
    
  3.   <source src="movie.mp4" mce_src="movie.mp4" type="video/mp4" />   
    4. 
    
    
    
    
  4. 你的浏览器不支持video标签。   
    5. 
    
    
    
    
  5. video>  
    6.

下面我们来看下controls 属性：

controls 属性规定浏览器应该为视频提供播放控件。

如果设置了该属性，则规定不存在作者设置的脚本控件。

浏览器控件应该包括：

  • 播放
  • 暂停
  • 定位
  • 音量
  • 全屏切换
  • 字幕（如果可用）
  • 音轨（如果可用）

在上面例子中我们没有用到preload 属性，下面我们来了解下为什么没有用。

首先preload 属性规定是否在页面加载后载入视频，它有三个值来控制他的功能：auto、meta、none。

     
  • auto - 当页面加载后载入整个视频
  • meta - 当页面加载后只载入元数据
  • none - 当页面加载后不载入视频

下面的纯属扯淡了。。。

在学习的时候发现的一个功能，顺便记录下面。这个JS主要是用来检测浏览器是否支持HTML5中的video标签。

   
   
   
   
    
    
    
    
    
  1. "text/javascript"> 
    2. 
    
    
    
    
  2.     
    3. 
    
    
    
    
  3. function checkVideo()   
    4. 
    
    
    
    
  4. {   
    5. 
    
    
    
    
  5. if(!!document.createElement('video').canPlayType)   
    6. 
    
    
    
    
  6.   {   
    7. 
    
    
    
    
  7.   var vidTest=document.createElement("video");   
    8. 
    
    
    
    
  8.   oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');   
    9. 
    
    
    
    
  9.   if (!oggTest)   
    10. 
    
    
    
    
  10.     {   
    11. 
    
    
    
    
  11.     h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');   
    12. 
    
    
    
    
  12.     if (!h264Test)   
    13. 
    
    
    
    
  13.       {   
    14. 
    
    
    
    
  14.       document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."   
    15. 
    
    
    
    
  15.       }   
    16. 
    
    
    
    
  16.     else   
    17. 
    
    
    
    
  17.       {   
    18. 
    
    
    
    
  18.       if (h264Test=="probably")   
    19. 
    
    
    
    
  19.         {   
    20. 
    
    
    
    
  20.         document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";   
    21. 
    
    
    
    
  21.         }   
    22. 
    
    
    
    
  22.       else   
    23. 
    
    
    
    
  23.         {   
    24. 
    
    
    
    
  24.         document.getElementById("checkVideoResult").innerHTML="Well. Some support.";   
    25. 
    
    
    
    
  25.         }   
    26. 
    
    
    
    
  26.       }   
    27. 
    
    
    
    
  27.     }   
    28. 
    
    
    
    
  28.   else   
    29. 
    
    
    
    
  29.     {   
    30. 
    
    
    
    
  30.     if (oggTest=="probably")   
    31. 
    
    
    
    
  31.       {   
    32. 
    
    
    
    
  32.       document.getElementById("checkVideoResult").innerHTML="Yes! Full support!";   
    33. 
    
    
    
    
  33.       }   
    34. 
    
    
    
    
  34.     else   
    35. 
    
    
    
    
  35.       {   
    36. 
    
    
    
    
  36.       document.getElementById("checkVideoResult").innerHTML="Well. Some support.";   
    37. 
    
    
    
    
  37.       }   
    38. 
    
    
    
    
  38.     }   
    39. 
    
    
    
    
  39.   }   
    40. 
    
    
    
    
  40. else   
    41. 
    
    
    
    
  41.   {   
    42. 
    
    
    
    
  42.   document.getElementById("checkVideoResult").innerHTML="Sorry. No video support."   
    43. 
    
    
    
    
  43.   }   
    44. 
    
    
    
    
  44. }   
    45. 
    
    
    
    
  45.    
    46.

然后在页面里面添加如下代码，样式自己定义：

   
   
   
   
    
    
    
    
    
  1. <div id="checkVideoResult">   
    2. 
    
    
    
    
  2. <button onclick="checkVideo()">Checkbutton>   
    3. 
    
    
    
    
  3. div>  
    4.

噢啦，HTML5还是很强大滴，继续学习，哈哈