轻应用npm版本，降低接入难度，适配自定义UI，适配主流框架
低延时预览，云存储回放，SD卡回放
功能API丰富，如：播放控制，音频控制，视频截图，实时获取视频OSDTime，视频录制，设备对讲，电子放大，全屏等
$ npm install ezuikit-js
import EZUIKit from 'ezuikit-js';
<script src="./ezuikit.js"></script>
基本使用
创建DOM
<div id="video-container"></div>
var player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
url: 'ezopen://open.ys7.com/G39444019/1.live',
width: 600,
height: 400,
})
var player = new EZUIKit.EZUIKitPlayer({
id: 'video-container', // 视频容器ID
width: 600,
height: 400,
accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
url: 'ezopen://open.ys7.com/G39444019/1.rec'
})
为方便开发者快速接入
我们提供了测试accessToken,测试播放地址，并提供了几种常用场景使用示例。你可以通过使用示例，使用测试播放地址，测试accessToken，在你的应用快速接入。
测试播放地址： ezopen://open.ys7.com/G39444019/1.live
你可以通过以下地址获取到测试accessToken 获取测试accessToken 用来播放上述测试播放地址。
基本使用： 基本使用示例
自定义主题： 自定义主题示例
本地主题配置： 本地主题配置示例
PC端预览-固定主题： PC端预览-固定主题示例
PC端回放-固定主题： PC端回放-固定主题示例
移动端预览-固定主题： 移动端预览-固定主题示例
移动端回放-固定主题： 移动端回放-固定主题示例
单页面多实例(视频多窗口)： 单页面多实例(视频多窗口)示例
| 参数名 | 类型 | 描述 | 是否必选 | |||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| id | String | 播放器容器DOM的id | Y | |||||||||||||||||||||
| accessToken | String | 授权过程获取的access_token | Y | |||||||||||||||||||||
| url | String |
ezopen://open.ys7.com/${设备序列号}/{通道号}.live ezopen://open.ys7.com/${设备序列号}/{通道号}.hd.live 初始化参数 url值为： 初始化参数 url值为： | Y | |||||||||||||||||||||
| audio | int | 是否默认开启声音 1：打开（默认） 0：关闭 | N | |||||||||||||||||||||
| width | int | 视频宽度，默认值为容器容器DOM宽度 | Y | |||||||||||||||||||||
| height | int | 视频高度，默认值为容器容器DOM高度 | Y | |||||||||||||||||||||
| template | String |
| ||||||||||||||||||||||
| themeData | Object |
themeData将主题数据本地化，设置本地数据，需要删除template参数 你可以通过themeData修改按钮位置，颜色，头部底部颜色等配置。 配置示例： | N | |||||||||||||||||||||
| plugin | String | 按需加载插件，可选值： talk：对讲，示例：plugin:["talk"] | N | |||||||||||||||||||||
| handleSuccess | function | 自动播放成功回调 | N | |||||||||||||||||||||
| poster | String | 视频默认封面 版本号> v0.4.6 | N |
同步方法（方式1） 方法支持通过promise回调，可通过回调方式执行下一步动作（方式2）。
// 方式1
player.play();
// 方式2
player.play()
.then(()=>{
console.log("执行播放成功后其他动作");
});
// 方式1
player.stop();
// 方式2
player.stop()
.then(()=>{
console.log("执行停止成功后其他动作");
});
// 方式1
player.openSound();
// 方式2
player.openSound()
.then(()=>{
console.log("执行开启声音成功后其他动作");
});
// 方式1
player.startSave("唯一文件名");
// 方式2
player.startSave("唯一文件名")
.then(()=>{
console.log("执行开始录制成功后其他动作");
});
// 方式1
player.stopSave();
// 方式2
player.stopSave()
.then(()=>{
console.log("执行停止录制成功后其他动作");
});
// 方式1 - 下载到本地
player.capturePicture("文件名");
// 方式2 - 返回base64格式
const capCallback = (data) => {
console.log("data",data)
}
player.capturePicture('default',capCallback)
player.startTalk();
player.stopTalk();
player.fullScreen();
player.cancelFullScreen();
player.getOSDTime()
.then((time)=>{
console.log("获取到的当前播放时间", time);
});
可用于在播放中切换设备，切换播放参数，以及直播切换回放等
player.changePlayUrl(options)
.then(()=>{
console.log("切换成功")
});
options参数说明
| 参数名 | 类型 | 描述 | 是否必选 |
|---|---|---|---|
| type | String | 播放地址类型，"live":预览，"rec"：回放；“cloud.rec”：云存储回放 | Y |
| accessToken | String | 授权过程获取的access_token | Y |
| deviceSerial | String | 设备序列号,存在英文字母的设备序列号，字母需为大写 | Y |
| channelNo | int | 通道号 | Y |
| hd | boolean | 是否为高清 true-主码流（高清） false-子码流(标清) | Y |
| validCode | String | 设备验证码（加密设备播放需要输入验证码） | Y |
| begin | String | type类型为回放有效，开始时间 格式为“YYYYMMDDHHmmss” | N |
| end | String | type类型为回放有效，结束时间 格式为 “YYYYMMDDHHmmss” | N |
你可以在初始化时，通过参数poster设置默认封面 实例初始化后可以调用设置封面方法再次更改封面
player.setPoster(pictureUrl)
.then(()=>{
console.log("更改封面成功");
});
// 方式1
player.enableZoom();
// 方式2
player.enableZoom()
.then(()=>{
console.log("开启电子放大成功");
});
// 方式1
player.closeZoom();
// 方式2
player.closeZoom()
.then(()=>{
console.log("关闭电子放大成功");
});
player.reSize(width, height);
如果使用原生js，可参考demos => base-demo
如果使用react，可参考demos => react-demo
如果使用vue，可参考demos => vue-demo
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent