HTML5：网页如何播放VR视频？

VR视频和普通视频有什么区别？

VR即虚拟现实，VR视频又名全景视频，是指使用全景摄像机拍摄的，观看时可以自由变换视角的视频。

戴上VR眼镜，随着头部转动看到的图像也随之变化，仿佛身处一个虚拟的世界中。

没有VR眼镜，通过手指触摸或体感控制，也能随意切换视角。

与传统视频相比，VR最大的优势就是赋予每个观看者以导演的权利，“ 一千个人心中有一千个哈姆雷特”，同一个虚拟世界，每个人也能走出属于自己的轨迹。

---

VR视频的播放原理？

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