一個博客難免需要引用視頻來說明內容，但想要自己來實現一個視頻播放器是不是一時半會就能完成的，更重要的是這需要對視頻播放技術有一定的了解。於是自然而然的有人會想到開源項目。一個不錯的選擇便是video.js，它的功能全面，夠控制基本的播放器樣式，支持mp4、webm、ogv視頻格式，也能夠插入字幕，基本上能夠滿足常用需求，界面也很美觀。 video.js也使用了html5的特性，如果瀏覽器不支持html5的話，想要播放視頻還得用flash。使用video.js很方便，只需要少許幾部就可以完成。
第一步 包含頭文件
這包括視頻播放器所必須的控制文件javascrip以及播放器樣式css文件。你可以選擇使用免費的CDN服務，也可以將文件下載到你的服務器中。但顯 然直接使用CDN服務更為方便，如果你選擇下載項目文件的話，還需要處理播放器所用到的一些圖片和字體，意味着需要重新指定這些文件的位置。
<link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet"> <script src="//vjs.zencdn.net/4.9/video.js"></script>
第二步 編寫html網頁的video元素
編寫html網頁的video元素關鍵在於設置video的屬性。通過設置video的屬性可以控制視頻播放器按你的要求展示。
class屬性：第一個參數video-js是必須的，這個屬性讓video.js知道，要讓它來控制這個視頻的樣式以及功能； 第二個參數用來說明播放器的外觀，默認只提供了一種外觀“vjs-default-skin”，如果你需要自定義外觀就可以將他設置為其他的值 有點讓人不習慣的是，video.js的作者認為播放鍵放在中間會遮住內容，於是把它移到了左上方，但這實在有違對稱的美感。不過幸好，它提供了一個參數將播放鍵改回中央：“vjs-big-play-centered” width和height參數用來指示播放器的長和高，沒什么可說的 有preload參數來控制視頻的加載，其值為”auto”時視頻隨網頁自動自動加載，”none”時不預先加載 它還允許設置視頻播放前的封面，當然如果你不指定會是視頻的第一幀，其值為封面圖片的地址。 這是一個video.js提供的樣例，一般不需要什么修改。
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
第三步 設置字幕
對於外文的視頻，也許需要嵌入字幕，或者是在視頻里加入一些說明，我找了老半天最終發現，video.js原生就支持字幕。它支持的是html5的標准字 幕格式WebVTT，文件后綴名為vtt，這個格式和最常見的srt格式很像，或者說將srt格式的字幕經過一步修改就可以成為WebVTT格式：在第一行插入
WebVTT
WebVTT格式對srt格式進行了少許擴展，使得它能夠與網頁相一致的方式方便地顯示字幕。
其中一個擴展是控制字幕文字的樣式，比如加粗、加下划線以及斜體，這完全html的語法相一致
粗體文本 <b>Lorem ipsum</b> 斜體文本 <i>dolor sit amet</i> 帶下划線的文本 <u>consectetuer adipiscing</u>
第二個擴展在於對字幕顯示位置的控制。 默認是居中於底側，如果沒有特殊要求就沒必要折騰了。根據不同的設置，字幕可以放置於屏幕的各個位置，可以向通常那樣橫着顯示，也可以豎着顯示。
D:vertical / D:vertical-lr 垂直地顯示文本而不是水平的。 它也指定文本是增長到左邊（ vertical）還是右側（ vertical-lr ） L:X / L:X% 一個數字或百分比。 如果是一個百分點，那么它指從框架頂部開始的位置。如果是一個數字，它表示會是在多少行。 T:X% 視頻上的水平文字位置。T:100% 表示文本會放在視頻的右側。
要使用這些設置，像下面這樣把它們放在時間設置的旁邊：
00:00:01.000 –> 00:00:10.000 A:middle T:50% 00:00:01.000 –> 00:00:10.000 A:end D:vertical 00:00:01.000 –> 00:00:10.000 A:start T:100% L:0%
第四步 高級設置
不喜歡，播放器的默認界面怎么辦，那如何來更改呢？要實現這些更改，就需要對CSS和javascript有更深入的了解了。在這方面我也是新手，但可以舉個例子，我是如何修改播放器字幕默認樣式的。 要修改默認樣式首先必須解決一個問題，使用定制的界面還能使用官方所提供的CDN服務嗎？答案是可以的，但必須得使用一個不那么優雅的方式，重載那些樣式的值。
如果你使用的是chrome或firefox瀏覽器，你可以用鼠標右鍵點中要修改樣式的部分（這里是字幕所在位置），選擇審查元素，便可方便查看所在元素 的id或是class。有了元素的定位方式后，在用其在vjs.zencdn.net/4.9/video-js.css文件中搜索，看一看都有哪些屬 性，默認值是什么樣。
比方說我想修改字幕的字體和顏色，只需要將以下代碼插入網頁頭部的末尾就好了，必須要在引用外部樣式的后邊，否則就不會有效果。
<style type="text/css">
.video-js .vjs-subtitles{
font-family: "lucida grande", "lucida sans unicode", lucida, "Helvetica Neue", helvetica, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
color: #fc6;
font-size: 2em;
line-height: 1em;
}
</style>
最終的效果是這樣子的：