VR即虚拟现实,VR视频又名全景视频,是指使用全景摄像机拍摄的,观看时能够自由变换视角的视频。
前端
戴上VR眼镜,随着头部转动看到的图像也随之变化,仿佛身处一个虚拟的世界中。跨域
没有VR眼镜,经过手指触摸或体感控制,也能随意切换视角。浏览器
与传统视频相比,VR最大的优点就是赋予每一个观看者以导演的权利,“ 一千我的心中有一千个哈姆雷特”,同一个虚拟世界,每一个人也能走出属于本身的轨迹。微信
VR视频播放是全景相机拍摄的逆过程。markdown
拍摄时,想象把一个水晶球的表面分红多份,每一份就是一个鱼眼镜头,多个鱼眼镜头把现实世界映射成一个球体的表面贴图;ide
全景相机网站
球体表面贴图spa
播放时,VR播放器会用3D技术构建出一个虚拟的球体,用户身处虚拟球体的内部中心,看到的就是拍摄时水晶球映射的球体表面;3d
3D虚拟球体和摄像机视频
用户头部转动时,调整3D摄像机角度,再经过凸透镜把画面映射到用户的双眼,详情参考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视频播放, 使用很是简单:
1、注册play2VR帐号,上传媒体(支持全景视频和图片),设置播放选项:
2、拷贝集成代码到网页源代码中:
完成!
另外,play2VR还能直接编辑交互热点,详见前端进阶-2分钟给VR场景加上交互。