分類: 網頁開發

VideoGL:3D HTML5 影片播放器 jQuery Plugin(支援特效濾鏡)

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

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



由於 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,畢竟開發這樣的東西也是很辛苦的。

G. T. Wang

個人使用 Linux 經驗長達十餘年,樂於分享各種自由軟體技術與實作文章。

Share
Published by
G. T. Wang
標籤: HTML5WebGL

Recent Posts

光陽 KYMCO GP 125 機車接電發動、更換電瓶記錄

本篇記錄我的光陽 KYMCO ...

2 年 ago

[開箱] YubiKey 5C NFC 實體金鑰

本篇是 YubiKey 5C ...

2 年 ago

[DIY] 自製竹火把

本篇記錄我拿竹子加上過期的苦茶...

3 年 ago