Video.js 是一個開放原始碼的 HTML5 影片撥放函示庫,提供一個統一且跨瀏覽器的 API,並且可以在瀏覽器不支援 HTML5 時自動使用其他的替代方案。

在最新的 HTML5 標準中,已經可以直接撥放影片檔了,如果您想要有更完整的功能,可以使用 Video.js 這個函示庫,他是以既有的 HTML5 為基礎所發展的影片撥放工具,並且添加了更多的功能,提供不同瀏覽器統一的 JavaScript API,在瀏覽器不支援時也可以使用 Flash 等替代方案。


以下是簡單的使用步驟。

Step 1
<head> 中引入 Video.js 的 JavaScript 與 CSS:

<link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9/video.js"></script>

Step 2
加入影片的 HTML 程式碼,基本上使用方式跟一般的 HTML5 標準寫法差不多:

<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' />
 <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>

data-setup 的內容可以設定一些選項來控制撥放器,class 的部分,video-js 是 Video.js 用來辨識的 class 名稱(不可更改),而 vjs-default-skin 則是用來指定外觀的 class,您可以自行指定別的 class。

呈現的效果如下: