萤石云有两个方法使用:
npm引入非npm引入
两个方法中的js内容不同,所以容器初始化方法也不同
详情可到github查看:/Hikvision-Ezviz
①npm引入:
步骤一:首先通过npn下载
npm install ezuikit-js
步骤二:项目中引入
import EZUIKit from 'ezuikit-js';// 或者下面原生script引入,二选一即可<script src="./ezuikit.js"></script>
步骤三:初始化容器
//首先创建一个容器DOM<div id="video-container"></div>//然后初始化,在合适的地方调用函数即可init(url,accessToken){player = new EZUIKit.EZUIKitPlayer({autoplay: true,id: "video-container",accessToken:accessToken,url: url,// 这里的url可以是直播地址.live ,也可以是回放地址.rec 或 .cloud.rectemplate: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;// 视频上方头部控件//header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖//plugin: ['talk'], // 加载插件,talk-对讲// 视频下方底部控件// footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启// openSoundCallBack: data => console.log("开启声音回调", data),// closeSoundCallBack: data => console.log("关闭声音回调", data),// startSaveCallBack: data => console.log("开始录像回调", data),// stopSaveCallBack: data => console.log("录像回调", data),// capturePictureCallBack: data => console.log("截图成功回调", data),// fullScreenCallBack: data => console.log("全屏回调", data),// getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),width: 600,//如果指定了width、height则以这里为准height: 400//如果没指定宽高,则以容器video-container为准});}
②非npm引入
步骤一:首先去官网下载整个文件夹(或这里:/Hikvision-Ezviz/EZUIKit-JavaScript)这里称呼文件夹为ezuikit
步骤二:项目中引入
在src\components\monitor\VideoHistoryWatch.vue 中使用ezuikit文件夹在src\statics\ezuikitimport "../../statics/ezuikit/ezuikit.js";// 或者script 引入<script src="../../statics/ezuikit/ezuikit.js"></script>
步骤三:初始化容器
//首先创建一个容器DOM<div id="video-container"></div>//然后初始化,在合适的地方调用函数即可init(url,accessToken){player = new EZUIKit.EZUIPlayer({autoplay: true,id: "video-container",accessToken:accessToken,url: url,// 这里的url可以是直播地址.live ,也可以是回放地址.rec,不能是回放地址 .cloud.recdecoderPath: "../../statics/ezuikit",//官网中说绝对路径,github中说相对路径,反正我这么写可以使用width: 600,height: 400});}
可以看出两个方法的初始化都不一样,一个是new EZUIKit.EZUIKitPlayer,一个是new EZUIKit.EZUIPlayer。所以两个方法中对应api有些也不通用。(小声逼逼:在这里踩一波官方,文档写的十分简陋)
如果需要动态切换播放地址我做的是:(vue写法)
watch:{index(new,old){//首先给视频容器id后缀加上一个idnex,当这个index变化时触发下面代码。if(old !== null) {this.player.stop()//如果要用stop,则stop要写在innerHTML="" 前面document.getElementById(`videoContainer${old}`).innerHTML=""}this.$nextTick(() => {this.init(this.url, this.accessToken, new)//把新index传给初始化函数,})}},