支持萤石 HLS/LL-HLS 流播放， 倍速播放和切换、本地录制码流等 (v9.0.20)
\n\nhls和flv 不在维护更新，后续版本中会被移除， flv 可以使用 ezuikit-flv, hls 可以使用 @ezuikit/player-hls
\nhls和flv 不在维护更新，后续版本中会被移除， flv 可以使用 ezuikit-flv, hls 可以使用 @ezuikit/player-hls
\nhls和flv 不在维护更新，后续版本中会被移除， flv 可以使用 ezuikit-flv, hls 可以使用 @ezuikit/player-hls
\n\n### 获取 ezuikit-js\n\n```bash\n# npm\nnpm install ezuikit-js\n\n# yarn\n\nyarn add ezuikit-js\n\n# pnpm\n\npnpm add ezuikit-js\n```\n\n### 引入 ezuikit-js\n\n```js\n// >= v8.1.2 ESM\nimport { EZUIKitPlayer } from \"ezuikit-js\";\n\n// < v8.1.2\nimport EZUIKit from \"ezuikit-js\";\n```\n\n#### 不支持 ESM (not support ESM)\n\n```js\n// >= v8.1.2 CommonJS\nimport { EZUIKitPlayer } from \"ezuikit-js/index.js\";\n\n// < v8.1.2 CommonJS\nimport EZUIKit from \"ezuikit-js/index.js\";\n```\n\n#### 如果你使用原生方法,可以通过标签引用\n\n```html\n\n\n```\n\n### 开始使用 - 初始化\n\n> 基本使用\n\n创建 DOM\n\n```html\n\n```\n\n## 播放器初始化\n\n### 直播\n\n```js\nimport { EZUIKitPlayer } from \"ezuikit-js\";\nconst player = new EZUIKitPlayer({\n id: \"video-container\", // 视频容器ID\n accessToken:\n \"at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz\",\n url: \"ezopen://open.ys7.com/BD3957004/1.live\",\n width: 600,\n height: 400,\n handleError: (err) => {\n if (err.type === \"handleRunTimeInfoError\" && err.data.nErrorCode === 5) {\n // 加密设备密码错误\n }\n },\n});\n```\n\n### 回放\n\n```js\nimport { EZUIKitPlayer } from \"ezuikit-js\";\nconst player = new EZUIKitPlayer({\n id: \"video-container\", // 视频容器ID\n width: 600,\n height: 400,\n accessToken:\n \"at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz\",\n url: \"ezopen://open.ys7.com/BD3957004/1.rec\",\n});\n```\n\n#### 非正式版说明\n\nalpha（功能测试）、beta（集成测试）为我们的非正式版本，可能存在功能或使用上的问题，若您遇到了任何问题，欢迎向我们反馈。\n\n非正式版本没有 CDN 资源，使用时需要配置 `staticPath`，引用本地的解码库资源。\n\n### 使用示例\n\n> 如果使用原生 js，可参考 demos => [base-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/base-demo)\n\n> 如果使用 react，可参考 demos => [react-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/react-demo)\n\n> 如果使用 react + vite，可参考 demos => [with-react-vite](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/with-react-vite)\n\n> 如果使用 vue2，可参考 demos => [vue-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue-demo)\n\n> 如果使用 vue3，可参考 demos => [vue3-demo](https://github.com/Ezviz-OpenBiz/EZUIKit-JavaScript-npm/tree/master/demos/vue3-demo)\n\n#### tips\n\n为方便开发者快速接入\n\n我们提供了测试 accessToken,测试播放地址，并提供了几种常用场景使用示例。你可以通过使用示例，使用测试播放地址，测试 accessToken，在你的应用快速接入。\n\n测试播放地址： ezopen://open.ys7.com/BD3957004/1.live\n\n你可以通过以下地址获取到测试 accessToken 获取测试 accessToken 用来播放上述测试播放地址。当前设备有可能下线或被移除了， 如果自己有设备优先使用自己的设备进行测试。\n\n### 轻应用 - 海外版本\n\n> 轻应用支持向接入萤石云海外环境的设备发起取流播放，需要在初始化时配置海外服务域名，示例：\n\n```js\nimport { EZUIKitPlayer } from \"ezuikit-js\";\nconst player = new EZUIKitPlayer({\n id: \"playWind\",\n width: 600,\n height: 400,\n template: \"pcLive\",\n url: \"\",\n accessToken: \"\",\n env: {\n domain: \"https://iusopen.ezvizlife.com\", // 北美地区\n },\n});\n```\n\n各地区的域名分别为：\n\n| 区域 | 域名 |\n| ------ | -------------------------------- |\n| 北美 | https://iusopen.ezvizlife.com |\n| 南美 | https://isaopen.ezvizlife.com |\n| 欧洲 | https://ieuopen.ezvizlife.com |\n| 新加坡 | https://isgpopen.ezvizlife.com |\n| 印度 | https://iindiaopen.ezvizlife.com |\n| 越南 | https://ivnopen.ezvizlife.com |\n\n#### 最佳实践 tips\n\n1. 我们在 v0.6.2 及以上版本持用户通过开启谷歌实验室特性启动多线程解码，多线程模式将大大提升解码效率，降低解码内存消耗。\n\n> [开启多线程方式 1](https://open.ys7.com/help/384)(https://open.ys7.com/help/384)\n\n> [开启多线程方式 2](https://open.ys7.com/help/385)(https://open.ys7.com/help/385)\n\n2. 视频解码库默认从开放平台远程拉取，你可以将解码库放到本地或者你的服务内，可以提升加载解码库速度。\n\n> 使用本地解码库提升加载速度 开发者需要自己设置静态资源文件地址， 参考 `staticPath`的配置\n\n### 使用示例\n\n> 1. 快速创建视频播放页面\n\n 基本使用： 基本使用示例\n\n> 2. 前往[开放平台轻应用模板管理页](https://open.ys7.com/console/ezuikit/template.html)创建一个主题，可以动态配置你的播放主题，控件，示例展示了获取一个主题后使用示例。\n\n 自定义主题： 自定义主题示例\n\n> 3. 你可以本地创建一个主题配置，可以本地配置你的播放主题，控件，示例展示了本地配置项使用示例。\n\n 本地主题配置： 本地主题配置示例\n\n> 4. 我们提供了一些通用场景的主题，PC 端预览，PC 端回放，移动端预览，移动端回放，你也可以直接使用。\n\n PC 端预览-固定主题： PC 端预览-固定主题示例\n\n PC 端回放-固定主题： PC 端回放-固定主题示例\n\n 移动端预览-固定主题： 移动端预览-固定主题示例\n\n 移动端回放-固定主题： 移动端回放-固定主题示例\n\n> 同一个页面播放多个视频，可以参考：\n\n 单页面多实例(视频多窗口)： 单页面多实例(视频多窗口)示例\n\n> 5. 视频分享场景（iframe 嵌入、播放区间约束），可以参考：\n\n 视频分享 iframe： 视频分享 iframe 示例\n\n#### 附录： 初始化参数说明\n\n| 参数名 | 类型 | 描述 | 是否必选 | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| id | String | 播放器容器DOM的id | Y | ||||||||||||||||||||
| accessToken | String | 授权过程获取的access_token | Y | ||||||||||||||||||||
| url | String | \n\n#### 直播\n\n##### 标清\n\nezopen://open.ys7.com/${设备序列号}/{通道号}.live \n\n##### 高清\n\nezopen://open.ys7.com/${设备序列号}/{通道号}.hd.live \n\n#### 回放\n\n##### sd 卡回放\n\n初始化参数 url 值为： ezopen://open.ys7.com/${设备序列号}/{通道号}.rec?begin=yyyyMMddhhmmss\n\n##### 云存储回放\n\n初始化参数 url 值为： ezopen://open.ys7.com/${设备序列号}/{通道号}.cloud.rec?begin=yyyyMMddhhmmss 视频 ezopen 协议播放地址 详见：ezopen 协议 | Y | ||||||||||||||||||||
| audio | boolean | 是否默认开启声音 true：打开（默认） false：关闭 | N | ||||||||||||||||||||
| width | int | 视频宽度，默认值为容器容器DOM宽度 | Y | ||||||||||||||||||||
| height | int | 视频高度，默认值为容器容器DOM高度 | Y | ||||||||||||||||||||
| staticPath | string | 设置静态资源地址, 自定义可以自行下载 `ezuikit_static`放置在自己的服务器下， 设置 {staticPath: \"/ezuikit_static\"} | N | ||||||||||||||||||||
| template | String | \n\n
| N | ||||||||||||||||||||
| themeData | Object | \nthemeData将主题数据本地化，设置本地数据，需要删除template参数 \n你可以通过themeData修改按钮位置，颜色，头部底部颜色等配置。\n\n配置示例：\n\n | N | ||||||||||||||||||||
| plugin | String | 按需加载插件，可选值： talk：对讲，示例：plugin:[\"talk\"] | N | ||||||||||||||||||||
| handleSuccess | function | 自动播放成功回调 | N | ||||||||||||||||||||
| handleError | function | 错误回调 | N | ||||||||||||||||||||
| seekFrequency | function | 为避免频繁拖动播放异常，可设置模板回放时间轴拖动防抖间隔，默认值为2000（2秒），可取2000（2秒），3000（3秒），4000（4秒），5000（5秒） | N | ||||||||||||||||||||
| language | String | 多语言 （zh | en）, 默认zh (v8.0.8版本及以上支持) | N | ||||||||||||||||||||
| debugDownloadData | boolean | 下载原始码流， 调试码流使用, 默认 false (v8.1.1版本及以上支持) | N | ||||||||||||||||||||
| disableRenderPrivateData | boolean | 禁止渲染私有数据(如智能分析， 移动侦测， 火点信息等), 默认 false (v8.1.1版本及以上支持) | N | ||||||||||||||||||||
| quality | 0 | 1 | 2 | 3 | 4 | 5 | 6 | pp | qp | 预览初始化支持指定清晰度进行播放, 默认 undefined (v8.1.5版本及以上支持)， 0: 流畅； 1: 标清; 2: 高清; 3: 超清; 4: 极清; 5: 3K; 6: 4K ; \"pp\"： \"性能优先 (Performance Priority)\"; \"qp\": \"画质优先(Quality Priority)\"。 | N | ||||||||||||||||||||
| loggerOptions | {name: string, level: \"INFO\" | \"LOG\" | \"WARN\" | \"ERROR\" , showTime: boolean} | 本地日志设置， 默认值 {name: \"ezuikit\", level: \"INFO\", showTime: true}, 支持动态设置请参考 setLoggerOptions(options) (v8.1.9版本及以上支持) | N | ||||||||||||||||||||
| streamInfoCBType | 0 | 1 | 流信息回调类型，监听 streamInfoCB 事件, 0 : 每次都回调（会影响性能）, 1 : 只回调一次, 默认值 1 (v8.1.9版本及以上支持) | N | ||||||||||||||||||||
| playbackRange | { begin: string, end: string } | 播放区间约束（视频分享片段播放），begin 和 end 格式为 YYYYMMDDhhmmss（14 位），必须在同一天且 begin < end。设置后回放将被约束在该区间内：时间轴、进度条、seek 操作均受区间限制，播放到区间末端自动触发 playbackEnd 事件。示例：{ begin: '20260819103500', end: '20260819104500' } (v9.0.18-beta.1 及以上支持) | N | ||||||||||||||||||||
| segmentProgressOptions | Object | null | 片段进度条控件配置，配合 playbackRange 使用时在移动端展示线性进度条。设为 null 关闭。需配合 mobileExtendOptions.controls 包含 'segmentProgress' 使用 (v9.0.18-beta.1 及以上支持) | N | ||||||||||||||||||||
| mobileExtendOptions | { controls: string[] } | 移动端扩展控件配置，controls 数组可选值：'timeLine'（时间轴）、'segmentProgress'（片段进度条）、'date'（日期选择）、'time'（时间选择）、'rec'（回放类型切换）、'ptz'（云台）。示例：{ controls: ['timeLine', 'segmentProgress'] } (v9.0.17 及以上支持) | N |