還記得long long ago，小編就曾就這個話題發布過一篇文章，但由於那時候還太low，文章內容基本都是網上copy，不巧的是官方的還是英文版，最後我照搬的發布了出去，估計那時候看到那篇文章的小夥伴心中有一萬隻草泥馬飛奔而過。如果有小夥伴想一睹當年的風採，請複製如下連結：http://mp.weixin.qq.com/s?__biz=MjM5MjQxODY5NA==&mid=210012666&idx=1&sn=a69322bb37628aae88dc67a6d6173c90#rd。在這裡小編還是勉為其難的廢話一句：你肯定看不懂的！因為到現在我也沒細細看過。
接下來咱再來說說為什麼要舊事重提，都已經貼出連結了，還有必要在這裡聽你費什麼話，原因呢，只有一個，之前的太過潦草，今天就想好好扒一扒！
之前咱要想在頁面中嵌一個視頻視頻呢，最簡單粗暴的方式就是flash，但是html5都興起這麼久了，你還好意思再用flash，雖然flash體積小是沒錯，那時候手機還不能看視頻，但是現在你要在頁面中嵌一個flash試試，這一拿到手機上頓時就傻了眼，你認為在android手機上會有人為了看你一個視頻還去裝一個flash播放器嗎？反正我不會，ios就不說了，貌似壓根就不支持flash，所以在移動當道的如今，要讓插入的視頻能適應多終端是多麼的重要。
當然你可以直接用video標籤，其中要準備各種格式的視頻什麼，什麼mp4、webm、ogg啥的，文件太多不說，兼容性是硬傷，這種形式能在手機和pc上正常顯示是沒錯，但是ie8呢，你別說你現在就拋棄ie8了吧（當然如果你不考慮ie8，讓你看了這麼多廢話也實在不好意思，接下來的您就不用看了。）
小編大致在網上查了下，這種插件讓小編記憶深刻的有兩個（html5media、video.js），html5media好像就是上次說的那個，今天咱就來具體聊聊video.js的使用和注意事項，如果還有其他好用的請小夥伴們在評論區留下你寶貴的意見，首先，還是老規矩，貼出官網地址：http://videojs.com/。一下是github地址：https://github.com/swimly/video.js。其實github上面已經有詳細的使用說明，但是有一些小問題並沒有說的那麼仔細。
1、首先，按照一般插件的使用方法，引入css和js，但是值得注意的是，如果你習慣將js放在body的最後加載，在這裡你就一定會遇到問題，在ie9以下會出現視頻加載失敗的問題，這時候你就需要將css文件和js文件一起放在head裡面加載，這樣ie9以下才會妥妥的。
2、首當其衝當然還是如何去調用了，其實視頻的調用和我們直接寫video標籤沒有什麼區別。
<video id="really-cool-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="really-cool-video-poster.jpg" data-setup='{}'> <source src="really-cool-video.mp4" type="video/mp4"> <source src="really-cool-video.webm" type="video/webm"> <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p></video>
以上就是個實例，當然這裡的source只需要一個mp4即可，當然如果要兼容ios小編估計這個webm還是需要，如果只是android和pc端，mp4足夠了。
3、還需要配置下swf播放器的路徑，也就是在ie9以下會默認使用flash播放器加載視頻文件：
videojs.options.flash.swf = "swf/video-js.swf";
這一步完成後就大功告成！
4、接下來就是預覽了，提示：如果在ie9以下直接打開html文件，視頻加載是會報錯的，這時候就需要臨時創建個本地伺服器去瀏覽該頁面，提示這是重中之重！
最後，出於仁道，小編還是整理了個小demo供大家參考，請點擊閱讀原文獲取demo源碼！