进取版播放器文档 (Plus)

进取版文档 (Plus)

运行环境

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

引用

1、初始化环境（必须）

var container=document.getElementById('example')

var renderer = new THREE.WebGLRenderer();

container.appendChild(renderer.domElement);

cameraParam={"fov":90,"aspect":container.innerWidth / container.innerHeight,"near": 0.001,"far": 1000},般不填即可，默认{}

var cameraPosition={"x": 0,"y": 0,"z": 0},一般不填即可，默认{}

var options={“width”:500,”height”:300},一般不填即可，默认{}

var scene = new THREE.Scene();

2、绑定到播放器（必须）

var vr=new VR(scene,renderer,container,cameraParam,cameraPosition,options);

/****************播放器初始化设置START,必须在调用vr.init()方法前（可选） **************/

// 进度条是否置于toolBar工具栏的顶部，默认在底部

vr.toolBarConfig.progressBar.top=true/false;

// 显示/隐藏更多按钮,默认false

vr.toolBarConfig.showMoreBtn=true/false;

// 播放初始化参数设置playCfg,如果play方法的第三个参数options设置了，则设置项会覆盖前面playCfg的设置。这两种方法不同点在于vr.playCfg 设置的是全局的，而options设置的只针对当前play调用有效。

vr.playCfg = {

poster: '',

autoFullScreen: false,

marks: [],

muted: false,

zIndex: 1,

playList: [],

autoplay: false,

shape: 'sphere',

marksType: ''

};

// 启用关闭陀螺仪（注意，需要在https下才会生效）

vr.useGyroscope = true/false;

加载进度

vr.loadProgressManager.onLoad = function () {

}

// 加载中

vr.loadProgressManager.onProgress = function () {

console.log("onProgress")

}

// 加载失败

vr.loadProgressManager.onError = function () {

console.log("onError")

}

/**************************播放器初始化设置END****************/

3、启动渲染器（必须）

vr.init(function(){

// 当前渲染器requestAnimationFrame同步回调，用于自定义渲染更新

})

4、开始播放，以下两个方法等价，随意使用一个即可（必须）

vr.playPanorama('视频或直播流地址',vrType);或

vr.play('视频或直播流地址',vrType);

播放类型vrType不填则为全景图模式，例如： vr.play('/examples/puydesancy.jpg');此功能可以用作视频poster，用户点击播放之后调用vr.play()方法播放对应的类型即可

播放类型如下：

vr.resType = {

"plugin": "plugin", // 插件模式

"video": "video", // 网络视频地址播放

"box": "box", // 全景图天空盒子

"fixedImage": "fixedImage", // 全景图-带修复模式

"videoSlice": "videoSlice", // 全景hls直播

"normal2d": "normal2d", // 普通视频模式播放，【进取B支持】

"normal2dSlice": "normal2dSlice", // 普通视频模式直播流【进取B支持】

"normal2dImage": "normal2dImage", // 普通图片显示【进取B支持】

"flvVideo": "flvVide", // flv全景直播模式

"flv2dVideo": "flv2dVideo", // 普通视频模式 flv直播流【进取B支持】

"cinema": "cinema", // 影院模式【进取B支持】

"flvCinema": "flvCinema", //影院模式flv直播【进取B支持】

"hlsCinema": "hlsCinema",//影院模式hls直播【进取B支持】

}

获取方法：例如直播hls，则resType为vr.resType.videoSlice或直接字符串 “videoSlice”

6、播放器控制（可选）

6.1、自动旋转

设置播放器镜头自动旋转

vr.controls.autoRotate=true

6.2、设置自动旋转速度为1.0

vr.controls.autoRotateSpeed=1.0

6.3、开启设置拖动惯性：默认关闭

vr.controls.enableDamping=true;

6.4、设置惯性动量，数值越大惯性越大（默认0.05）

vr.controls.dampingFactor=0.05;

6.5、设置拖动旋转速度，数值越大拖动灵敏度越大,默认0.25

vr.controls.rotateSpeed=0.25

6.6、回正初始视角

vr.controls.reset();

6.7、陀螺仪（注意）开启点击陀螺仪并同意授权后才会生效

关闭陀螺仪

vr.controls.gyroFreeze()

开启陀螺仪

vr.controls.gyroUnfreeze()

6.8播放事件回调：

vr.video对象为播放器视频对象，支持原始所有video方法和事件

下面是几个常用video事件回调使用例子

// 视频已开始加载
video.onloadstart = function () {
};
// 当音频/视频的加载已放弃时触发。
video.onabort = function () {
};
// 当浏览器可以开始播放音频/视频时触发。
video.oncanplay = function () {
};
// 当浏览器可在不因缓冲而停顿的情况下进行播放时触发
video.oncanplaythrough = function () {
};
// 当音频/视频的时长已更改时触发。
video.ondurationchange = function () {
};
// 当目前的播放列表已结束时触发。
video.onended = function () {
};
// 当在音频/视频加载期间发生错误时触发。
video.onerror = function () {
};
// 当浏览器已加载音频/视频的当前帧时触发。
video.onloadeddata = function () {
};
// 当浏览器已加载音频/视频的元数据时触发。
video.onloadedmetadata = function () {
};
// 当音频/视频已暂停时触发。
video.onpause = function () {
};
// 当音频/视频已开始或不再暂停时触发。 video.onplay = function () {
};
// 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 video.onplaying = function () {
};
// 当浏览器正在下载音频/视频时触发。
video.onprogress = function () {
};
// 当音频/视频的播放速度已更改时触发。
video.onratechange = function () {
};
// 当用户已移动/跳跃到音频/视频中的新位置时触发。
video.onseeked = function () {
};
// 当用户开始移动/跳跃到音频/视频中的新位置时触发。
video.onseeking = function () {
};
// 当浏览器尝试获取媒体数据，但数据不可用时触发。
video.onstalled = function () {
};
// 当浏览器刻意不获取媒体数据时触发。
video.onsuspend = function () {
};
// 当目前的播放位置已更改时触发。
video.ontimeupdate = function () {
};
// 当音量已更改时触发。
video.onvolumechange = function () {
};
// 当视频由于需要缓冲下一帧而停止时触发。
video.onwaiting = function () {
};

6.9、开启/退出全屏

AVR.fullscreen(vr.container,true/false);

6.10、是否全屏

AVR.isFullscreen(container)

6.11、设置加载中loading动图

AVR.playerLoading.innerHTML="";

显示加载中：

AVR.loading.show();

隐藏加载中:

AVR.loading.hide();

6.12、销毁播放器对象

vr.destroy();

7.1、vr.toolBar 对象包含了所有的工具栏按钮对象,可使用console.log(vr.toolBar)打印查看对象，找到相应的dom对象可进行删除、更改、隐藏等等一系列dom操作 vr.toolBar按钮事件处理

例如：重新绑定VR按钮自定义按钮事件,使用getEvent方法获取原来的事件方法

// getEvent(name事件名称, null, group所属的对象组),事件名称和group可以在AVR.eventList中找到，第二个参数是回调方法，如果没有找到就会返回该方法，查询操作不需要设置该参数

AVR.getEvent('_toolbar_vrBtnClick',null,'init');

vr.toolBar.vrBtn.removeEventListener('click', _toolbar_vrBtnClick);

vr.toolBar.vrBtn.onclick = function () {

alert(‘自定义事件处理代码’)

};

7.2、HD分辨率处理

//AVR.HD.liList = { "流畅": 'http://www.baidu.com/1.hls', "标清": 'http://www.baidu.com/2.hls', "高清": 'iii', "无损": 'ddd' };//默认 { "流畅": 0.3, "标清": 0.6, "高清": 0.8, "无损": 1 }。当值为数字的时候会去设置渲染器renderer.setEncoderOptions(val)，如果value不是数字，则会自动将video的src调整为value，并reload视频，前提时不能设置VR.HD.selectFunc用户自定义回调方法 //AVR.HD.selectFunc = function (val) { alert(val); };// 默认为null AVR.HD.selectFunc回调方法，当用户点击hd选项后会携带选项的value执行selectFunc方法回调，开发人员自行处理逻辑.

7.3、播放器图标

播放器所有内置的图标都在AVR.playerIcon对象内，使用SVG代码存储，如果需要自定义，例如更换播放按钮图标可使用AVR.playerIcon.playSvg=”svg code”方式。

8、标记点(可选) [进取版B支持]

8.1、有两种初始化标记点的方式，第一种通过配置初始化

//vr.playCfg.marks = marks;

//vr.playCfg.marksType = 'editMarkIcon';

第二种在调用播放方法的时候设置到options参数内

var options = { 'marks': marks, 'marksType': 'editMarkIcon' };

vr.playPanorama('/examples/puydesancy.jpg', '', options);

marksType设置为'editMarkIcon'时用户可以拖动编辑标记点位置，适合用于后台管理设置管理标记点位置。当位置设置好之后可以通过AVR.AVR.getMarks()获取标记点的json数据用于保存。前端拿到json数据使用上面的步骤，marksType设置为空即可展示

8.2、后期手动添加

AVR.markEditor(id, title, icon_url, click_callback);

8.3、删除标记点

// 只删除指定id的标记点

AVR.marksRemove(id);

// 全部删除

AVR.marksRemove();

9、兼容问题

8.1、处理部分iphone版本无法播放问题

if (navigator.userAgent.match(/iphone os 14_0/i) || navigator.userAgent.match(/iphone os 14_1/i) || navigator.userAgent.match(/iphone os 14_3/i)) {

AVR.__fixHlsRender = true; // 启用问题版本兼容模式

}

Android 系统的不同的浏览器支持hls.js 会存在差异导致黑屏，可以检测一下是否支持，不支持的可以尝试使用如下配置

if (!Hls.isSupported() && vr.video.canPlayType('application/vnd.apple.mpegurl')) {

vr.liveSettings.forceUseXmpegUrl=true;

}

if (!Hls.isSupported() && vr.video.canPlayType('application/x-mpegURL')) {

vr.liveSettings.that.liveSettings.forceUseVndAppleMpegUrl=true;

}

10、其他一些问题

10.1 自动播放：可以全局设置,如vr.playCfg.muted=true;vr.playCfg.autoplay=true;或者调用play方法是options参数的包含{muted:true,autoplay:true}两个配置项。

10.2 陀螺仪必须使用https，如果需要自动开启就设置vr.controls.gyroUnfreeze()开启陀螺仪。