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場景加上交互。