轉自：http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html
現在如果要在頁面中使用video标簽，需要考慮三種情況，支援Ogg Theora或者VP8（如果這玩意兒沒出事的話）的（Opera、Mozilla、Chrome），支援H.264的（Safari、IE 9、Chrome），都不支援的（IE6、7、8）。好吧，現在讓我們從技術層面來認識HTML 5的視訊，包括video标簽的使用，視訊對象可以用到的媒介屬性和方法，以及媒介事件。
Video标簽的使用
Video标簽含有src、poster、preload、autoplay、loop、controls、width、height等幾個屬性， 以及一個内部使用的标簽<source>。Video标簽内除了可以包含<source>标簽外，還可以包含當指定的視訊都不能 播放時，傳回的内容。
(1) src屬性和poster屬性
你能想象src屬性是用來幹啥的。跟<img>标簽的一樣，這個屬性用于指定視訊的位址。而poster屬性用于指定一張圖檔，在目前視訊資料無效時顯示（預覽圖）。視訊資料無效可能是視訊正在加載，可能是視訊位址錯誤等等。
<code><</code><code>video</code> <code>width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></</code><code>video</code><code>></code>
(2) preload屬性
這個屬性也能通過名字了解用處，此屬性用于定義視訊是否預加載。屬性有三個可選擇的值：none、metadata、auto。如果不使用此屬性，預設為auto。
<code><</code><code>video</code> <code>width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></</code><code>video</code><code>></code>
None：不進行預加載。使用此屬性值，可能是頁面制作者認為使用者不期望此視訊，或者減少HTTP請求。
Metadata：部分預加載。使用此屬性值，代表頁面制作者認為使用者不期望此視訊，但為使用者提供一些中繼資料（包括尺寸，第一幀，曲目清單，持續時間等等）。
Auto：全部預加載。
(3) autoplay屬性
又是一個看名字知道用處的屬性。Autoplay屬性用于設定視訊是否自動播放，是一個布爾屬性。當出現時，表示自動播放，去掉是表示不自動播放。
注意，HTML中布爾屬性的值不是true和false。正确的用法是，在标簽中使用此屬性表示true，此時屬性要麼沒有值，要麼其值恒等于他的名字 （此處，自動播放為<video autoplay />或者<video autoplay=”autoplay” />）；而在标簽中不使用此屬性表示false（此處不進行自動播放為<video />）。
(4) loop屬性
<code><</code><code>video</code> <code>width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></</code><code>video</code><code>></code>
一目了然，loop屬性用于指定視訊是否循環播放，同樣是一個布爾屬性。
(5) controls屬性
<code><</code><code>video</code> <code>width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></</code><code>video</code><code>></code>
Controls屬性用于向浏覽器指明頁面制作者沒有使用腳本生成播放控制器，需要浏覽器啟用本身的播放控制欄。
控制欄須包括播放暫停控制，播放進度控制，音量控制等等。
每個浏覽器預設的播放控制欄在界面上不一樣。由于我浏覽器的詭異問題，Firefox和Safari的Video标簽不正常，是以這兩個隻能在網上找截圖了。
(6) width屬性和height屬性
屬于标簽的通用屬性了，這個不用多說。
(7) source标簽
<code><</code><code>video</code> <code>width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><</code><code>source</code> <code>src="http://www.youname.com/images/first.ogv" /><</code><code>source</code> <code>src="http://www.youname.com/images/first.ogg" /></</code><code>video</code><code>></code>
Source标簽用于給媒體（因為audio标簽同樣可以包含此标簽，是以這兒用媒體，而不是視訊）指定多個可選擇的（浏覽器最終隻能選一個）檔案位址，且隻能在媒體标簽沒有使用src屬性時使用。
浏覽器按source标簽的順序檢測标簽指定的視訊是否能夠播放（可能是視訊格式不支援，視訊不存在等等），如果不能播放，換下一個。此方法多用于相容不同的浏覽器。Source标簽本身不代表任何含義，不能單獨出現。
此标簽包含src、type、media三個屬性。
src屬性：用于指定媒體的位址，和video标簽的一樣。
Type屬性：用于說明src屬性指定媒體的類型，幫助浏覽器在擷取媒體前判斷是否支援此類别的媒體格式。
Media屬性：用于說明媒體在何種媒介中使用，不設定時預設值為all，表示支援所有媒介。你想到<style>标簽的media屬性了麼？一樣一樣一樣的。
(8) 一個完整的例子
這段代碼在頁面中定義了一個視訊，此視訊的預覽圖為poster的屬性值，顯示浏覽器的預設媒體控制欄，預加載視訊的中繼資料，循環播放，寬度為900像素，高度為240像素。
第一選擇視訊位址為第一個source标簽的src屬性值，視訊類别為Ogg視訊，視訊編碼譯碼器為Theora，音頻編碼譯碼器為Vorbis，播放媒 介為顯示器；第二選擇視訊位址不再累述。如果你還要相容IE的話，可以在最後一個source标簽後再加上Flash播放器的标簽集，或者使用一點 JavaScript代碼。
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)