HDC|云VR:HTML5播放VR视频

举报
小云云 发表于 2020/01/11 16:04:43 2020/01/11
【摘要】 随着VR视频的发展,为了让VR视频可以在移动端广泛的传播,用户无需下载第三方APP就可以观看VR视频,有了在移动设备上通过浏览器播放VR视频的技术。既通过HTML5播放VR视频。VR视频和普通视频的区别VR即虚拟现实,VR视频又名全景视频,是指使用全景摄像机拍摄的,观看时可以自由变换视角的视频戴上VR设备,随着头部转动看到的图像也随之变化,仿佛身处一个虚拟的世界中。VR视频的播放原理VR播放...

随着VR视频的发展,为了让VR视频可以在移动端广泛的传播,用户无需下载第三方APP就可以观看VR视频,有了在移动设备上通过浏览器播放VR视频的技术。既通过HTML5播放VR视频。


VR视频和普通视频的区别

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

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


VR视频的播放原理

VR播放器会用3D技术构建出一个虚拟的球体,用户身处虚拟球体的内部中心,看到的就是拍摄时映射的球体表面,用户头部转动时,调整3D摄像机角度,再通过凸透镜把画面映射到用户的双眼


HTML5如何播放VR视频

随着WebGL的普及率提高,而且WebGL能访问底层的图形绘制API,使网页渲染VR视频的刷新率可以达到60Hz,保证了视频观看的流畅性。

当前浏览器对WebGL的支持情况

image.png

一些JS的开源库如three.js , A-frame (Threejs等开源库对WebGL进行了封装,让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下,也能够轻松进行web 3D开发,降低了门槛,同时大大提升了效率。)可以快速的实现在HTML5上播放VR视频的功能。


HTML5 VR播放器可以支持的主要功能

支持全景/360/VR视频 

支持多码率自适应转码,流媒体播放 

支持多种全景视频格式 

支持音轨、字幕、码率 

支持多种播放类型、播放控制


随着MSE\MEM\WEBGL在浏览器中成为标准和普及,相信Web会是VR内容最好的传播渠道



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。