關於利用video.js解決網頁插入視頻不能播放不兼容的辦法步驟

第一次寫博客，內心有些小忐忑，博客內容主要是工做中遇到的問題，以及解決以後的一些心得體會，也借鑑了網絡上的資料，若有不足，歡迎指正~

寫這篇文章的初衷是由於老闆想要在公司網站加一個宣傳視頻，原本以爲很簡單，HTML5嘛，一個video標籤輕鬆搞定！誰知道，寫完傳到服務器以後才發現，在PC端視頻根本播放不了，可是用手機就能夠打開，是否是很奇怪。覺得是視頻格式的問題，因而下載了格式工廠，各類轉格式，mp四、flv、avi……全都試個遍，仍是不行。

後來在網上發現幾篇文章，而後就進行總結，通過各類調試，終於解決了！下面是具體步驟。

言歸正傳，這篇博客是關於網頁中插入視頻的解決辦法，能夠兼容IE、Chrome、火狐、360等瀏覽器。固然網絡上有不少種方法，本文主要講利用video.js插入視頻。

Video.js 是一個通用的在網頁上嵌入視頻播放器的 JS 庫，Video.js 自動檢測瀏覽器對 HTML5 的支持狀況，若是不支持 HTML5 則自動使用 Flash 播放器。

具體步驟：

1.在頁面中引用video-js.css樣式文件和video.js。

2.設置flash路徑，Video.js會在不支持html5的瀏覽中使用flash播放視頻文件。

3.在html中寫video標籤，插入視頻。

可以使用三種視頻格式，根據所須要格式選擇對應的。

4.若是IE不支持的話，能夠加入下面這段代碼，意思是：若是是IE瀏覽器就將視頻替換爲傳統的以FLASH形式播放。

5.html5media.js 讓瀏覽器兼容<Video><Audio> 標籤，一行代碼搞定。不過，本人用了這個以後沒有解決，因此仍是用的video.js，這裏發上來跟你們分享一下。

引入js：

<script src="http://api.html5media.info/1.1.8/html5media.min.js"></script>

插入視頻：

<video src="video.mp4" width="320" height="200" controls preload></video>

最後要注意一點，雖然前臺支持3種格式，可是後臺服務器並不必定都支持哦，因此我選擇的是mp4格式，編碼格式是h264，通常都支持。可是這裏有遇到了一個小難題，傳到服務器之後找不到mp4這個文件，百度一下才知道是後臺服務器的設置問題。

出現404報錯說明mp4格式文件是服務器沒法識別的，其實，這是沒有在iis中將相應的MIME類型進行設置的緣由。那該怎樣設置MIME類型呢？

開啓mp4文件的話，須要在 「Internet信息(IIS)管理器」中右擊須要更改的網站或目錄，能夠打開形以下圖的窗口(我右擊的是文件夾而不是站點，因此您右擊站點的話打開的 或許比個人選項卡多，無論怎樣您點擊HTTP頭就能夠打開怎樣的窗口了)：

服務器增長mp4格式的MIME 類型映射設置的具體步驟是：
「開始」 > 「控制面板」 > 「管理工具」 >「Internet 信息服務（IIS管理器）」，找到您的網站，右擊 > 「屬性」 > 「HTTP頭」 > 「MIME類型」 > 「新建」，在「擴展名」框內輸入「.mp4」，「MIME類型」框中輸入「application/octet-stream」，而後肯定便可。「MIME類型」只是一個描述，並不是非得輸入「flv-application/octet-stream」。

服務器增長flv格式的MIME 類型映射設置的具體步驟是：
「開始」 > 「控制面板」 > 「管理工具」 >「Internet 信息服務（IIS管理器）」，找到您的網站，右擊 > 「屬性」 > 「HTTP頭」 > 「MIME類型」 > 「新建」，在「擴展名」框內輸入「.flv」，「MIME類型」框中輸入「flv-application/octet-stream」，而後肯定便可。「MIME類型」只是一個描述，並不是非得輸入「flv-application/octet-stream」。

MIME類型就是設定某種擴 展名的文件用一種應用程序來打開的方式類型，當該擴展名文件被訪問的時候，瀏覽器會自動使用指定應用程序來打開。多用於指定一些客戶端自定義的文件名，以 及一些媒體文件打開方式。

好了，Java我也不太懂，後面這段徹底是借花獻佛，從網上摘抄過來的。不事後臺這樣設置後，視頻能播放啦！哈哈，開心~

以上就是這篇博客的所有內容啦，第一次寫博客，經驗不足，若是有錯誤的地方，歡迎你們指正，固然能給你們提供到幫助的話，我也很開心噠~