酷视网页视频播放器sdk使用说明文档
产品使用说明书
运行环境
支持w3c标准且支持webGL 3D渲染引擎的浏览器，包含微信、微博、qq等app等部分主流app
探索版使用说明：
<script src="./build/mxreality.js"></script>
<div id='example'></div>
<script>
container=document.getElementById('example')
renderer = new THREE.WebGLRenderer();
container.appendChild(renderer.domElement);
scene = new THREE.Scene();
var vr=new VR(scene,renderer,container);
vr.init(function(){
})
vr.playPanorama('视频或直播流地址',<vrType>);
播放类型如下：
vr.resType = {
"plugin": "plugin", // 插件模式
"video": "video", // 网络视频地址播放
"box": "box", // 全景图天空盒子
"fixedImage": "fixedImage", // 全景图-带修复模式
"videoSlice": "videoSlice", // 全景hls直播
"normal2d": "normal2d", // 普通视频模式播放
"normal2dSlice": "normal2dSlice", // 普通视频模式直播流
"normal2dImage": "normal2dImage", // 普通图片显示
"flvVideo": "flvVide", // flv全景直播模式
"flv2dVideo": "flv2dVideo", // 普通视频模式 flv直播流
"cinema": "cinema", // 影院模式
"flvCinema": "flvCinema", //影院模式flv直播
"hlsCinema": "hlsCinema",//影院模式hls直播
}
获取方法：例如直播hls，则resType为vr.resType.videoSlice或直接字符串 “videoSlice”
在全景播放前面定义资源加载状态回调方法：
//全景资源加载完成回调
vr.loadProgressManager.onLoad(xhr){
console.log("loaded");
}
//全景资源加载中回调
vr.loadProgressManager.onProgress(item, loaded, total){
console.log("item=",item,"loaded",loaded,"total=",total);
}
//全景资源加载错误回调
vr.loadProgressManager.onError(xhr,cl) {
console.log(xhr,cl);
}
自动旋转
设置播放器镜头自动旋转
vr.controls.autoRotate=true
设置自动旋转速度为1.2
vr.controls.autoRotateSpeed=1.2
陀螺仪
关闭陀螺仪
vr.controls.gyroFreeze()
开启陀螺仪
vr.controls.gyroUnfreeze()
几个播放器对象：
Vr.video对象为播放器视频对象，支持原始所有video方法和事件
Vr.toolBar 对象包含了所有的工具栏按钮对象
</script>
旗舰版使用说明：
<script type='text/javascript' src="path/to/mxplayer.js"></script>
<!--以下两个库按需引入，如果为软解码则无需引入下面两个库，是否需要判断看后面播放方法说明-->
<!------------------------------按需引入begin---------------------------------------->
<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>
<!------------------------------按需引入end---------------------------------------->
<div class="container" id="videoPlayer">
<div id="playCanvas" style="width: 100%;max-width:600px;height: 400px;"></div>
</div>
<script type='text/javascript'>
window.onload = function () {
var player = new Player("playCanvas");
播放器初始化完成回调，代表下载器、解析器、播放器、video对象等等已经初始化完成
player.onInit = function () {
如下可设置播放器初始化视频poster图片或者直接调用则是显示全景图
player.poster('/video/puydesancy.jpg', 'sphere');
}
用户点击左下角播放按钮回调，根据播放需求，可调用如下7中方式调用播放方法
player.playBtnClick = function () {
播放参数说明：
url参数为播放地址或直播地址
shape参数就是指定播放类型，有”plane”平面视频和“sphere” VR视频两种模式
muted参数控制是否静音
isStream 参数控制是否为直播流
waitHeaderLength 每次下载包大小，为null时使用默认大小
streamType为软解播放流的类型，有'flvStream'和'hlsStream'，可以使用 player.streamTypes查看
1、播放网络视频地址
player.playVideo(url, shape, muted, isStream);
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、webRtc直播
绑定webrtc直播流
player.attachWebRTC(streamUrl, pullUrl, stopUrl);
播放直播流
player.playVideo('', 'plane', false, true);
7、自定义解码器使用，能否使用需要看所使用的库是否能够获取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();
}
全景图
下面两个方法等价，都是显示全景图或者普通图片，可用作于视频初始化poster图，当调用视频播放方法后会自动切切换为视频播放，无需额外操作
player.poster('/path/to/puydesancy.jpg',shape);
player.picture('/path/to/puydesancy.jpg', shape);
多个播放器切换
如果一个页面有多个播放容器，那么需要再用户操作某个容器时重新new Player(containerID)即可，流程和初始化一个一致，播放器渲染会切换到当前容器渲染并销毁其他容器，可灵活方便定义多个容器进行播放，注意：不支持同时渲染多个容器。
自动旋转
设置播放器镜头自动旋转
vr.MXPlayer.orbitCtl.autoRotate=true
设置自动旋转速度为1.2
vr.MXPlayer.orbitCtl.autoRotateSpeed=1.2
陀螺仪
关闭陀螺仪
vr.MXPlayer.orbitCtl.gyroFreeze()
开启陀螺仪
vr.MXPlayer.orbitCtl.gyroUnfreeze()
}
</script>
