Video.js：開放原始碼 HTML5 影片撥放函示庫

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。

呈現的效果如下：

Video.js：開放原始碼 HTML5 影片撥放函示庫

沒有留言:

張貼留言

熱門文章