在網站中嵌入VideoJs視頻播放器

一個博客不免須要引用視頻來講明內容，但想要本身來實現一個視頻播放器是否是一時半會就能完成的，更重要的是這須要對視頻播放技術有必定的瞭解。因而天然而然的有人會想到開源項目。一個不錯的選擇即是video.js，它的功能全面，夠控制基本的播放器樣式，支持mp四、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>

 最終的效果是這樣子的：