VideoGL 是一個 jQuery 的 plugin,藉由 HTML5 的技術讓影片在 3D 的互動環境下播放,而且支援各種特效濾鏡。
VideoGL 將 HTML5 標準的 video
轉換為支援 3D 互動的影片播放器,讓使用者可以產生互動式的 3D 動畫、並且還可以加上一些影像的後處理,例如灰階與模糊等特效濾鏡。在 VideoGL 的官方網站上有實際的 demo 範例,下面這短影片則是實際操作的錄影:
由於 VideoGL 有使用到 WebGL 的技術,目前許多的行動裝置對於 WebGL 支援有限,所以如果你的手機不是很新的話,可能無法看到全部的功能。
如果要在網頁中加入 VideoGL 的功能,首先至少需要三個 JavaScript 檔案:
threejs.custom.min.js
)videogl.min.js
)以下是一些選擇性的 JavaScript,可以依照自己的需要決定是否要加入:
threejs.filters.custom.js
):提供影片的濾鏡。所以如果全部的 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 運作,必須加入:
video
標籤,指定影片的來源。(這個部分在網頁上會被隱藏起來)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 並不是免費的,它在 Code Canyon 上面一個 License 賣 12 塊美金,如果是用來盈利的 License,則要 60 塊美金。
不過如果你想要自己在家測試的話,其實可以從他的 demo 網站下載必要的這些 JavaScript,在瀏覽器上的東西只要看得到就一定抓的到,用 Chrome 的開發人員工具,就可以下載這些 JavaScript。
如果試用過感覺不錯,而且要放在網路上使用的話,還是請你去購買它的 License,畢竟開發這樣的東西也是很辛苦的。