VR視訊播放是全景相機拍攝的逆過程。

拍攝時，想象把一個水晶球的表面分成多份，每一份就是一個魚眼鏡頭，多個魚眼鏡頭把現實世界對映成一個球體的表面貼圖；

全景相機

球體表面貼圖

播放時，VR播放器會用3D技術構建出一個虛擬的球體，使用者身處虛擬球體的內部中心，看到的就是拍攝時水晶球對映的球體表面；

3D虛擬球體和攝像機

使用者頭部轉動時，調整3D攝像機角度，再通過凸透鏡把畫面對映到使用者的雙眼，詳情參考VR視訊播放原理。

---

網頁如何播放VR視訊？

“開放、平等、協作、分享”是網際網路精神，Web是VR內容最好的傳播渠道。

VR視訊能豐富網頁的表現形式，提高使用者的參與感。

WebGL的普及率高，並能訪問底層的圖形繪製API，網頁渲染VR視訊的重新整理率能達到60赫茲，與APP一樣流暢。

WebGL相容表

three.js , A-frame 等優秀的開源JS庫能快速地實現在網頁上播放VR視訊，具體可參考相關網站， 但是經過筆者實測，直接使用也有一些缺點：

• js檔案超過500Kb，影響網頁載入速度

• 瀏覽器相容以Chrome/Firefox支援為主

• 互動功能的開發較複雜，要求前端掌3D圖形學知識

---

play2VR(www.play2vr.com)是一款免費易用的VR視訊播放器，它尺寸還不到30Kb（gzip） , 支援主流PC/移動瀏覽器和微信，整合CDN還支援跨域VR視訊播放, 使用非常簡單：

一、註冊play2VR賬號，上傳媒體（支援全景視訊和圖片），設定播放選項：

二、拷貝整合程式碼到網頁原始碼中：

完成！

另外，play2VR還能直接編輯互動熱點，詳見前端進階-2分鐘給VR場景加上互動。