酷视网页视频VR播放器SDK（旗舰版）使用说明书

旗舰版mxplayer H5视频播放器使用说明书

运行环境
支持w3c标准且支持webGL 3D渲染引擎的浏览器，包含微信、微博、qq等app等部分主流app

旗舰版使用说明：
<script type='text/javascript' src="path/to/mxplayer.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.0.2-0.canary.7189/hls.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js"></script>

Player(containerId, width（可选）, height（可选）, path（可选）, onInit(可选)) ，如果播放器plugin文件地址获取错误可以强制指定第四个参数，类似Player('playCanvas', 400, 200,'http://aa.bb.cc/path/to/lib/')，第五个参数是onInit初始化完成回调，第六个为播放器其他初始化参数（可选）,
初始化参数： options:{ 'bg': '#1b1212', 'toolbar_bg': '#444', 'toolbar_color': '#fff' }; bg播放器未播放时的背景，toolbar_bar:播放器工具栏背景，toolbar_color：播放器工具栏字体颜色

播放器初始化完成回调，代表下载器、解析器、播放器、video对象等等已经初始化完成
player.onInit = function () {
如下可设置播放器初始化视频poster图片或者直接调用则是显示全景图
player.poster('/video/puydesancy.jpg', 'sphere');
}

用户点击左下角播放按钮触发播放，则视频播放方法写在playBtnClick 方法回调中（注意：该方法只会第一次回调）也就是player.isFirstPlay为true时回调，当playBtnClick回调完成一次之后isFistPlay自动会设置为false。之后点击则不再回调，只处理播放暂停逻辑。
如果需要切换视频自定义播放，则播放视频方法（下面有说明）不能写在playBtnClick回调方法内，因为只要调用播放方法isFistPlay就会设置为true，用户点击工具栏播放按钮会再回调播放一次。同时如果需要播放视频还需调用player.video.play()才能开始播放视频，因为视频播放video.play()方法是点击工具栏播放按钮才会触发。

player.playBtnClick = function () {

}

播放参数说明：
url参数为播放地址或直播地址
shape参数就是指定播放类型，有”plane”平面视频和“sphere” VR视频两种模式
muted参数控制是否静音
isStream 参数控制是否为直播流
waitHeaderLength 每次下载包大小，为null时使用默认大小
streamType为软解播放流的类型，有'flvStream'和'hlsStream'，可以使用 player.streamTypes查看 options:{ scale: { x: 0, y: 0, full: 0 }, anaglyphMode: false }

视频播放方法：
1、播放网络视频地址
player.playVideo(url, shape, muted, isStream,options);

2、播放flv 直播流，ios设备可能不兼容，但是相比于play方法软解性能要好
player.playFlv(url, shape, muted, isStream); // 该方法需要引用flv.js库

3、播放hls流
player.playHls(url, shape, muted, isStream); // 该方法需要引用hls.js库

4、播放原始视频
player.playOriginal(url, shape, muted, isStream);

5、播放hls直播流、播放flv、播放ts、播放h265。play方法使用的解码方式为纯软解，兼容性好，可在所有设备解码flv格式和h265编码，但是性能不是很好，如果需要兼顾性能和兼容性，前端需要根据设备类型切换调用方法，比如ios无法解码flv，需要调用play进行软解，但是android和pc设备支持flv.js 配合video硬解码，因此调用playFlv方法
player.play(url, waitHeaderLength, isStream, shape, streamType)

6、自定义解码器使用，能否使用需要看所使用的库是否能够获取video对象，将第三方解码器的video对象指向player.video=video完成绑定，再调用playVideo方法播放，否则无法使用，例如：
var flvPlayer = flvjs.createPlayer();
flvPlayer.attachMediaElement(player.video);
flvPlayer.load();
player.playVideo(url, shape, muted, true);
如果使用的不是软解方法，可使用原始方法获取和操作video对象
player.video.play();

7、webrtc直播，支持普通视频和VR视频，能达到毫秒级别的超低延迟直播。
player.playWebRtc(url, shape,muted);

8、webrtc推流,当准备完成开始推送，player.webRtcPublished回调方法将被触发，url:例如 webrtc://domain:443/live/livestream
player.player.publishWebRtc(url);

全景图：下面两个方法等价，都是显示全景图或者普通图片，可用作于视频初始化poster图，当调用视频播放方法后会自动切切换为视频播放，无需额外操作
player.poster('/path/to/puydesancy.jpg',shape);
player.picture('/path/to/puydesancy.jpg', shape);

改变播放器宽高：
player.setSize(width,height)

x和y的范围在区间(0-1]内，x=1为视频铺满播放器宽，y=1为视频铺满播放器高，默认则是自动保持原始视频宽高比进行缩放,如果视频宽高都小于播放器宽高，但是想以长宽等比例按最长边最大化放大，则只需要设置scale.full=1,注意！如果x，y的优先级比full高，所以如果需要full生效，则scale.x和scale.y不能设置。
MX.planeVideoCfg.scale={x:1,y:1,full:0};

多个播放器切换
如果一个页面有多个播放容器，那么需要再用户操作某个容器时重新new Player(containerID)即可，流程和初始化一个一致，播放器渲染会切换到当前容器渲染并销毁其他容器，可灵活方便定义多个容器进行播放，注意：不支持同时渲染多个容器。

自动旋转
设置播放器镜头自动旋转
player.MXPlayer.orbitCtl.autoRotate=true

设置自动旋转速度为1.2
player.MXPlayer.orbitCtl.autoRotateSpeed=1.2

开启设置拖动惯性：默认关闭
Player.MXPlayer.orbitCtl.enableDamping=true;

设置惯性动量，数值越大惯性越大（默认0.05）
Player.MXPlayer.orbitCtl.dampingFactor=0.05;

陀螺仪,（注意）开启点击陀螺仪并同意授权后才会生效
关闭陀螺仪
player.MXPlayer.orbitCtl.gyroFreeze()

开启陀螺仪
player.MXPlayer.orbitCtl.gyroUnfreeze()

设置拖动旋转速度，数值越大拖动灵敏度越大,默认0.05,开启惯性状态下为0.25
player.MXPlayer.orbitCtl.rotateSpeed=0.05

回正初始视角
player.MXPlayer.orbitCtrl.reset();

播放器渲染清除色设置
player.MXPlayer.clearBg = { r: 0, g: 0, b: 0 }

获取当前h5Video对象
player.video

获取所有的工具栏按钮对象
player.toolBar

开启全屏,自动判断当前状态，全屏/退出全屏
player.fullscreen()

修改播放器加载中图标
MX.playerLoading.innerHTML=”<img src=’123.gif’/>”;

显示加载中：
player.showLoading();

隐藏加载中:
player.hideLoading();

销毁播放器对象
player.destroy();

兼容问题：
1、处理老机型兼容问题，部分较老的机型不支持web Worker或不支持wasm会出现无法初始化，导致播放失败，可以通过new Player 之前设置全局参数MX.disableWASM=true;这样播放器可以正常初始化来兼容一些设备，该操作只适用于支持video硬解码授权的设备，disableWASM=true后软解play 方法将无法使用，包括flv直播流，h265、ts、h264软解等操作，所以需要判断设备型号区分使用
2、部分android 机在播放的时候会报Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The video element contains cross-origin data, and may not be loaded. 这种情况可以设置 MX.forceHls=true 在播放playBtnClick 调用之前即可
</script>

注意：
陀螺仪使用需要https支持
服务器资源/直播流如果不在同一个域（a.baidu.com,b.baidu.com,a.baidu.com:8080这都属于不是同一个域）下，则需要资源/流服务器设置允许跨域请求

酷视网页视频VR播放器SDK（旗舰版）使用说明书相关推荐

酷视网页视频VR播放器SDK（进取版）使用说明书
进取版(mxreality.js)H5视频播放器使用说明: 运行环境: 支持w3c标准且支持webGL 3D渲染引擎的浏览器,包含微信.微博.qq等app等部分主流app <script src ...
EasyVRPlayer，一款可快速集成的VR播放器SDK，同时可快速适配国内主流的VR一体机设备
EasyVRPlayer是基于其他vr设备的适配sdk开发的,将多种vr sdk功能api抽象化,构建中间层,开发者无需关注vr sdk的实现,直接使用中间层即可,免去了对每种vr sdk进行适配的烦 ...
支持Unity引擎！Visbit推出Web VR播放器云服务
Visbit实现了VR视频云服务在移动端的全面覆盖. 据悉,Visbit网页端VR播放器基于Web VR开发,并推出VR开发引擎Unity的SDK.要知道,四大主流浏览器Chrome.Firefox. ...
集成VR播放器--虚拟现实浪潮的一舟: UtoVR
最近圈内刮起一股VR与AR狂潮,虚拟现实与直播推流技术方兴未艾,正好在项目中也涉及到集成第三方播放器的支持,给大家介绍一款国内的,免费的,集成很方便的产品平台--UtoVR. 在实际使用过程中难免有些 ...
GOOGLE VR SDK开发VR游戏，VR播放器之一
最近一年来,VR虚拟现实和AR增强现实技术的宣传甚嚣尘上.其实VR,AR技术很早就有了,一直没有流行开来,不可否认价格是影响技术推广的最大壁垒.谷歌对VR最大的贡献是提供了廉价的谷歌眼镜,按照GOOG ...
云创平台+播放器SDK，腾讯云音视频新工具助力视频生产、终端能力全面升级
腾讯云音视频围绕在线视频生产和终端播放能力推出新工具. 6月28日,在"TechoDay腾讯技术开放日"活动现场,腾讯云音视频发布"腾讯云视立方·播放器SDK" ...
爱奇艺html5不能播放器,爱奇艺视频播放失败怎么办网页视频不能播放的解决方法教程[多图]...
有网友反映在爱奇艺网站看视频时总是提示播放失败,不能正常播放视频,这该怎么办呢?本文将给大家介绍解决爱奇艺视频播放失败的方法. 解决方法: 1.电脑缓存过多解决方法:点击"设置" ...
openGL ES进阶教程（五）制作一个简单的VR播放器，播放全景视频
之前写过全景(VR)图片,和用openGL ES+MediaPlayer 渲染播放视频+滤镜效果这一篇就在之前的基础上实现一个最简单的VR播放器,播放全景视频. 概述: 全景视频是一种用3D摄像机进 ...
Android优酷播放器SDK——Eclipse工程迁移Android Studio遇到问题
Android优酷播放器SDK--Eclipse工程迁移Android Studio遇到问题希望大家看完本文章能解决遇到的问题,如果没有表明清楚问题所在,还望指点一二: 下载优酷视频播放器SDK 导 ...

酷视网页视频VR播放器SDK（旗舰版）使用说明书

酷视网页视频VR播放器SDK（旗舰版）使用说明书相关推荐

最新文章

热门文章