Html5視頻播放video標籤使用詳解【轉】

1，下面是一個播放視頻的最簡單樣例 
（controls屬性告訴瀏覽器要有基本播放控件）

 

 

<video src="hangge.mp4" controls></video>

2，經過width和height設置視頻窗口大小

<video src="hangge.mp4" controls width="400" height="300"></video>

3，預加載媒體文件 
設置preload不一樣的屬性值，能夠告訴瀏覽器應該怎樣加載一個媒體文件： 
（1）值爲auto：讓瀏覽器自動下載整個文件 
（2）值爲none：讓瀏覽器沒必要預先下載文件 
（3）值爲metadata：讓瀏覽器先獲取視頻文件開頭的數據塊，從而足以肯定一些基本信息（好比視頻的總時長，第一幀圖像等）

<!-- 用戶點擊播放纔開始下載 -->

<video src="hangge.mp4" controls preload="none"></video>

4，自動播放 
（1）使用autoplay屬性可讓瀏覽器加載完視頻文件後當即播放。

<video src="hangge.mp4" controls autoplay></video>

（2）若是啓用自動播放，能夠將播放器設置爲muted狀態。這樣自動播放時會靜音，防止用戶厭煩。用戶須要的話能夠點擊播放器揚聲器圖標從新打開聲音。

<video src="hangge.mp4" controls autoplay muted></video>

5，循環播放 
使用loop屬性讓視頻播放結束時，再從頭開始播放。

<video src="hangge.mp4" controls loop></video>

6，設置替換視頻的圖片（封面圖片） 
經過poster屬性能夠設置，瀏覽器在下面三種狀況下會使用這個圖片： 
（1）視頻第一幀未加載完畢 
（2）把preload屬性設置爲none 
（3）沒有找到指定的視頻文件

<video src="hangge.mp4" controls poster="hangge.png"></video>

7，瀏覽器兼容，如何讓每個瀏覽器都能順利播放視頻 
如今大部分瀏覽器都能支持H.264格式的視頻，但Opera瀏覽器卻一直不支持。咱們須要經過後備措施保證每一個人都能看到視頻，一般有下面幾種方案： 
（1）使用多種視頻格式 
<video>和<audio>元素有個內置的格式後備系統。咱們不使用src屬性，而是在其內部嵌套一組<source>元素，瀏覽器會選擇播放第一個它所支持的文件。 
咱們能夠添加WebM格式的視頻提供對Opera的支持。

<video controls>

    <source src="hangge.mp4" type="video/mp4">

    <source src="hangge.webm" type="video/webm">

</video>

（2）添加Flash後備措施（推薦） 
上面那個方法不推薦，應爲Opera瀏覽器只佔不到1%的份額。特地爲它把視頻都轉碼一邊太費事。使用Flash做爲備用播放方案仍是很方便的，同時Flash還能兼容IE8這種連<video>元素都不支持的老瀏覽器。

這裏使用Flowplayer Flash做爲備用播放器（本地下載 ：flowplayer-3.2.18.zip）

<video controls>

    <source src="hangge.mp4" type="video/mp4">

    <source src="hangge.webm" type="video/webm">

 

    <object id="flowplayer" width="400" height="300"

        data="flowplayer-3.2.18.swf"

        type="application/x-shockwave-flash">

        <param name="movie" value="flowplayer-3.2.18.swf">

        <param name="flashvars" value='config={"clip":"hangge.mp4"}'>

    </object>

</video>

（3）也有人優先使用Flash，而HTML5做爲後備措施。 
這麼作是由於Flash普及率比較高，而HTML5做爲後備能夠擴展iPad和iPhone用戶

<object id="flowplayer" width="400" height="300"

    data="flowplayer-3.2.18.swf"

    type="application/x-shockwave-flash">

    <param name="movie" value="flowplayer-3.2.18.swf">

    <param name="flashvars" value='config={"clip":"hangge.mp4"}'>

    <video controls>

        <source src="hangge.mp4" type="video/mp4">

        <source src="hangge.webm" type="video/webm">

    </video>

</object>

 

更多技術好文，關注微信公衆號「挨踢學霸」