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

vr h5播放器开发相关推荐

SkeyeWebPlayer.js H5播放器开发之播放器video动态创建（三）
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...
SkeyeWebPlayer.js H5播放器开发之播放器控制栏部分功能的实现（四）
SkeyeWebPlayer.js H5免费播放器支持Websocket-RTSP播放; 支持 m3u8(HLS) 播放; 支持 HTTP-FLV/WS-FLV 播放; 支持 HEVC/H265 播 ...
SkeyeWebPlayer.js H5播放器开发之webpack项目创建级编译配置（一）
SkeyeWebPlayer.js H5播放器开发之播放器动态渲染video. 动态渲染是采用js进行创建dom.添加dom.添加class.style等方式操作dom元素.最终将播放器编译成成一个独 ...
熊猫TV直播H5播放器架构探索
本文来自熊猫TV音视频技术专家姜雨晴在LiveVideoStackCon 2017上的分享,并有LiveVideoStack整理成文.当下,打造一款播放器已经有比较好的开源实现,但熊猫TV为什么还要自 ...
微信公众号教程（18）微信音乐播放器开发上
微信音乐播放器开发原文:http://www.cnblogs.com/imaker/p/6252638.html 一.Html5的audio组件 HTML5 有两个很炫的元素,就是Audio和 ...
网页全终端视频直播/点播H5播放器EasyPlayer.js正式发布，支持H.265网页播放
在之前的多篇博客<历时半年,终于研发完成了Web网页对H.265(HEVC)直播和点播的支持,WebAssembly(wasm)>.<EasyPlayer.js开发Web H5网页播 ...
VR全景播放器 AvPro Video
最近项目需要,使用Unity开发VR全景播放器,包括PC端和VR一体机端(Android).Unity5.6开始支持VideoPlayer,使用自带的VideoPlayer,很顺利把播放器完成了,使用 ...
VR+全景播放器+头控讲解-01
VR+全景播放器+头控讲解-01-知识储备 VR+全景播放器+头控讲解-02-创建球体 VR+全景播放器+头控讲解-03-渲染视频 VR+全景播放器+头控讲解-04-滑动手势 VR+全景播放器+头控讲 ...
SkeyeWebPlayer.js H5播放器是怎么样炼成的
SkeyeWebPlayer.js H5播放器是由成都视开信息科技开发和维护的一个完善的RTSP.FLV.HLS等多种流媒体协议播放,视频编码支持H.264,H.265,音频支持AAC,支持TCP/U ...

vr h5播放器开发

vr h5播放器开发相关推荐

最新文章

热门文章