Html5的vedio視訊播放

原

淺談html5 video标簽嵌入視訊

置頂 2015年05月18日 16:01:26

閱讀數：13296

前面談到了網頁怎麼嵌入flash視訊，就想到了另一個問題，flash格式視訊在手機上播放，需要手機安裝flash播放插件，而且flash視訊絕對無法在蘋果手機上播放，因為蘋果對flash的不支援，導緻現在flash前景堪憂。當然目前已經有些插件可以支援蘋果手機播放flash視訊。

這裡就要談一談html5的video标簽了。html5功能的強大是毋庸置疑的，而且作為一款為蘋果量身定做的前端技術，現在html5對各浏覽器的支援也越來越好，在手機端的支援也是讓我覺得沒有什麼可以相比的。

在html5中嵌入視訊非常簡單，僅僅隻需要如下代碼就可以實作了：

</video>

html5标簽的屬性：

autoplay autoplay 如果出現該屬性，則視訊在就緒後馬上播放。
controls controls 如果出現該屬性，則向使用者顯示控件，比如播放按鈕。
height pixels 設定視訊播放器的高度。
loop loop 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。
muted muted 規定視訊的音頻輸出應該被靜音。
poster URL 規定視訊下載下傳時顯示的圖像，或者在使用者點選播放按鈕前顯示的圖像。
preload preload 如果出現該屬性，則視訊在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。
src url 要播放的視訊的 URL。
width pixels 設定視訊播放器的寬度。

當然，如果想要很漂亮的播放外觀呢？那麼就可以用html5播放器了，目前有很多html5播放器，比如http://www.cnblogs.com/lhb25/archive/2011/06/27/7-great-html-5-video-player-scripts.html

本人覺得videojs是一個很不錯的選擇，下面就介紹下這個播放器的使用。

第一步：在官網下載下傳video.js和video-js.css以及video-js.swf

第二步：在head标簽引入

[html] view plain copy

print?

<link rel="stylesheet" type="text/css" href="assets/lib/css/video-js.css">
<script src="assets/lib/js/jquery.js"></script>
t;script src="assets/lib/js/movive/video.js"></script>
t;script src="assets/lib/js/movive/html5media.js"></script>

<!--video.js html5視訊播放器-->
    <link rel="stylesheet" type="text/css" href="assets/lib/css/video-js.css">
  <script src="assets/lib/js/jquery.js"></script>
<script src="assets/lib/js/movive/video.js"></script>
	
    <!--IE低版本支援-->
<script src="assets/lib/js/movive/html5media.js"></script>

可以看到有一個html5media.js的類庫，這個類庫是對IE低版本的支援，大家都知道，IE對html5的支援不太好，這個看項目需求可以加入。直接網上就可以下載下傳。

第三步：body裡加入video标簽

[html] view plain copy

print?

<video id="Html5Video" class="video-js vjs-default-skin" preload controls autoplay width="100%"
poster="assets/images/movie/poster.jpg">
<source id="src1" src="assets/movie/video.mp4" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' />
<source id="src2" src="assets/movie/zhiyan.ogv" type=\'video/ogg; codecs="theora, vorbis"\' />
<source id="src3" src="assets/movie/linyoujia.webm" type=\'video/webm; codecs="vp8, vorbis"\' />
您的浏覽器不支援 video 标簽。
</video>

<video id="Html5Video" class="video-js vjs-default-skin" preload controls autoplay  width="100%"
    	poster="assets/images/movie/poster.jpg"> 
            <source id="src1" src="assets/movie/video.mp4" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' />
            <source id="src2" src="assets/movie/zhiyan.ogv" type=\'video/ogg; codecs="theora, vorbis"\' />
            <source id="src3" src="assets/movie/linyoujia.webm" type=\'video/webm; codecs="vp8, vorbis"\' />
   	 您的浏覽器不支援 video 标簽。
 </video>

html5支援三種格式的視訊：mp4,ogv,和webm。首先要準備一個 mp4 格式的視訊(h264)，可以在蘋果裝置中使用；其次要準備 ogv 格式的視訊，用在火狐浏覽器中；最後要準備一下 webm 格式的視訊，這個可以用在谷歌浏覽器等。這樣就確定支援幾乎所有的主流浏覽器了。

在這裡還要多說一點，可能是技術發展的原因，各種浏覽器對這三種格式的支援沒有那麼絕對了，比如：mp4格式的視訊，在谷歌,搜狗，火狐，手機端等都可以正常播放，其他兩種格式大緻也是這種情況。而且，video标簽對視訊格式的支援好像也沒有那麼絕對了，至少我放入wmv,avi格式的視訊也是可以播放的，感興趣的同學可以試試啦，這裡我就不多講了。

在這裡要重點強調的一點是視訊的準備，我們準備mp4,ogv,webm格式的視訊，可能會遇見明明是mp4格式的視訊，為什麼不能播放呢？而且用一些轉碼軟體轉碼視訊給mp4,ogv,webm格式的視訊也是無法播放，這裡可能是轉碼的問題，比如：mp4要求是h246，可是按照要求轉碼後，可能還是無法播放。這裡給各位大俠推薦一款視訊轉換軟體，專門為html5量身定做的：Freemake Video Converter。直接轉碼為html5視訊，就會轉換給MP4,ogv.webm三種格式的視訊，并且會生成相應的代碼。

第四步：js

[html] view plain copy

print?

<script> _V_.options.flash.swf = "assets/lib/js/movive/video-js.swf";</script>

<script> _V_.options.flash.swf = "assets/lib/js/movive/video-js.swf";</script>

加入這段代碼，就可以在不支援的浏覽器自動切換為flash播放。

最後，在伺服器部署後，會發現視訊可能無法播放，這是因為IIS裡我們沒有配置mime類型的支援，把mp4,ogv,webm這三種格式的支援都配置好了，視訊就可以正常播放了。至于如何配置，百度搜尋一下就知道了，有很多的，而且最好配置的檔案類型要符合相應的格式，但我試了一下，發覺檔案類型沒有什麼影響...如果配置後，還是無法播放，那麼可能就是檔案類型不對，具體看情況而定吧。

文章标簽：

video html5視訊 video-js 多平台視訊嵌入

個人分類：

前端視訊