vr h5播放器开发

不需要用户安装客户端,实现在pc和手机浏览器中浏览vr视频。基于videojs-panorama实现,该插件依赖videojs和threejs,通过videojs播放各种格式的视频文件,然后将解码后的视频用threejs来渲染实现浏览3d视频的效果。

代码处理流程如下:

在plugin.js中设置player回调onPlayerReady=》
(1)如果不支持webgl,显示“不支持webgl显示”的提示,用原生player样式播放视频
(2)如果为mobile设备,加载mobile显示样式,禁用原生player样式
(3)用canvas显示视频,canvas中用threejs显示3d视图
在basecanvas.js中 如果不支持texture显示或者 safari播放hls时,创建helperCanvas来画图


经过真机测试,总结如下:

1,ios11.2以下版本不支持跨域访问,可以在不跨域情况下正常播放mp4和hls格式视频。 ios11.2以上无此限制
2,android自带浏览器不支持同层播放,播放vr视频时会被系统自带播放器挡住。用微信的x5内核支持同层播放,在video标签中设置x5-video-player-type="h5" x5-video-player-fullscreen="true" style="object-fit:fill",所以在android上目前只能支持微信和qq分享播放。一般用户都是通过微信分享播放,这块限制还不是太大。
3,在safari和ios中播放hls用的 helperCanvas画图,不能用texture。需要在html中设置属性 helperCanvas: {width:1920, height:1080},将canvas分辨率设置为1920x1080,否则会导致播放的vr视频较模糊。

实际的sample例子可以参考https://github.com/lipku/videojs-panorama/tree/master/sample


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值