VideoGL：3D HTML5 影片播放器 jQuery Plugin（支援特效濾鏡）

VideoGL 是一個 jQuery 的 plugin，藉由 HTML5 的技術讓影片在 3D 的互動環境下播放，而且支援各種特效濾鏡。

VideoGL 將 HTML5 標準的 video 轉換為支援 3D 互動的影片播放器，讓使用者可以產生互動式的 3D 動畫、並且還可以加上一些影像的後處理，例如灰階與模糊等特效濾鏡。在 VideoGL 的官方網站上有實際的 demo 範例，下面這短影片則是實際操作的錄影：

名稱：VideoGL
網址：http://plugincc.fabiobiondi.com/?cerchez-project=videogl

由於 VideoGL 有使用到 WebGL 的技術，目前許多的行動裝置對於 WebGL 支援有限，所以如果你的手機不是很新的話，可能無法看到全部的功能。

使用 VideoGL

如果要在網頁中加入 VideoGL 的功能，首先至少需要三個 JavaScript 檔案：

• 經過修改後的 ThreeJS（threejs.custom.min.js）
• jQuery
• VideoGL jQuery plugin（videogl.min.js）

以下是一些選擇性的 JavaScript，可以依照自己的需要決定是否要加入：

• Modernizr：動態載入影片，並且判斷影片的格式。
• ThreeJS shaders 與後處理（threejs.filters.custom.js）：提供影片的濾鏡。
• Stats：監測 fps 等數據的小工具。

所以如果全部的 JavaScript 都放進來，就會像這樣：

<!-- 必要的 JavaScript -->
<script src="threejs.custom.min.js"></script>
<script src="jquery-1.9.1.js"></script>
<script src="videogl.min.js"></script>

<!-- 選擇性的 JavaScript -->
<script src="modernizr.js"></script>
<script src="threejs.filters.custom.js"></script>
<script src="Stats.js"></script>

引入 JavaScript 檔之後，接著要讓 VideoGL 運作，必須加入：

1. 一個 HTML5 的 video 標籤，指定影片的來源。（這個部分在網頁上會被隱藏起來）
2. 一個實際放置影片播放器的 div 空標籤（作為 wrapper），VideoGL 會將播放器放在這裡面。

<!-- 指定影片來源 -->
<video id="videoID" autoplay  style="display:none;">
  <source src="your_video_path.webm" type='video/webm;'>
  <source src="your_video_path.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <source src="your_video_path.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>

<!-- wrapper -->
<div id="wrapperID " style="width: 100%; height: 100%; position:absolute"></div>

接著再加入啟用 VideoGL 的 JavaScript 程式碼：

<script>
$("#wrapperID").videoGL({
  "videoID":"videoID",
  "videoWidth":640,
  "videoHeight":360,
  "cameraX":-150,
  "cameraY":40,
  "cameraZ":170,
  "rotationX":0,
  "rotationY":0,
  "rotationZ":0,
  "enableStats": true
 });
</script>

這樣就可以了。

動態指定影片

VideoGL 也可以讓你使用 JavaScript 動態指定要播放的影片，這樣就不用另外使用 video 標籤指定影片來源，不過記得要加上 Modernizr 這個 JavaScript，然後修改啟用 VideoGL 的 JavaScript：

<script>
$("#wrapperID").videoGL( {
  "videoID": "video1",
  "videos": {
    "mp4":  "myVideo.mp4", 
    "webm": "myVideo.webm",
    "ogg":  "myVideo.ogv"
  },
  "videoWidth": 320,
  "videoHeight": 240,
  "cameraX": 70,
  "cameraY": 40,
  "cameraZ": 150,
  "enableStats": true
});
</script>

以上我們介紹了 VideoGL 的基本用法，關於進階的濾鏡與 3D 控制等功能，請參考 VideoGL 的網站。

下載 VideoGL

介紹完 VideoGL 之後，如果你想要使用的話，你應該會發現他沒有下載的網址，因為 VideoGL 並不是免費的，它在 Code Canyon 上面一個 License 賣 12 塊美金，如果是用來盈利的 License，則要 60 塊美金。

不過如果你想要自己在家測試的話，其實可以從他的 demo 網站下載必要的這些 JavaScript，在瀏覽器上的東西只要看得到就一定抓的到，用 Chrome 的開發人員工具，就可以下載這些 JavaScript。

如果試用過感覺不錯，而且要放在網路上使用的話，還是請你去購買它的 License，畢竟開發這樣的東西也是很辛苦的。