【vue ezuikit-js】可复制的萤石视频使用方式

最新推荐文章于 2026-03-25 01:46:56 发布

原创最新推荐文章于 2026-03-25 01:46:56 发布 · 2.4k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js #前端 #视频

vue2 专栏收录该内容

48 篇文章

订阅专栏

文章讲述了作者在导入ezuikit-js时遇到的问题，通过下载官方示例并替换项目中的库来修复bug。内容涵盖了如何使用ezuikit构建定制视频播放组件，包括主题数据配置和加载特定插件的过程。

导入ezuikit-js

npm install ezuikit-js

有个小tip，我在导入ezuikit-js，按照官网进行视频展示，但是有bug。所以我下载了官网的vue demo，把自己项目node_modules里面的ezuikit-js替换成demo的。

完整代码

<video
                  id="video-container"
                  poster="../../../assets/videoDemo.png"
                  style="width: 300px; height: 200px; object-fit: cover"
                  :key="resetDiv"
                ></video>
//poster可以展示视频未播放时候的默认图片

变量声明部分

import EZUIKit from 'ezuikit-js'
var player = null

      themeData: {
        poster: '../../../../src/assets/videoDemo.png',
        header: {
          color: '#fff',
          activeColor: '#FFFFFF',
          backgroundColor: '#000000',
          btnList: [
            {
              iconId: 'deviceID',
              part: 'left',
              defaultActive: 0,
              memo: '顶部设备序列号',
              isrender: 1,
            },
            {
              iconId: 'deviceName',
              part: 'left',
              defaultActive: 0,
              memo: '顶部设备名称',
              isrender: 1,
            },
            {
              iconId: 'cloudRec',
              part: 'right',
              defaultActive: 0,
              memo: '云存储',
              isrender: 0,
            },
            {
              iconId: 'rec',
              part: 'right',
              defaultActive: 0,
              memo: 'SD卡回放',
              isrender: 0,
            },
          ],
        },
        footer: {
          color: '#FFFFFF',
          activeColor: '#1890FF',
          backgroundColor: '#00000021',
          btnList: [
            {
              iconId: 'play',
              part: 'left',
              defaultActive: 1,
              memo: '播放',
              isrender: 1,
            },
            {
              iconId: 'capturePicture',
              part: 'left',
              defaultActive: 0,
              memo: '截屏按钮',
              isrender: 1,
            },
            {
              iconId: 'sound',
              part: 'left',
              defaultActive: 0,
              memo: '声音按钮',
              isrender: 1,
            },
            {
              iconId: 'pantile',
              part: 'left',
              defaultActive: 0,
              memo: '云台控制按钮',
              isrender: 1,
            },
            {
              iconId: 'recordvideo',
              part: 'left',
              defaultActive: 0,
              memo: '录制按钮',
              isrender: 1,
            },
            {
              iconId: 'talk',
              part: 'left',
              defaultActive: 0,
              memo: '对讲按钮',
              isrender: 1,
            },
            {
              iconId: 'zoom',
              part: 'left',
              defaultActive: 0,
              memo: '电子放大',
              isrender: 1,
            },
             {
              iconId: 'hd',
              part: 'right',
              defaultActive: 0,
              memo: '清晰度切换按钮',
              isrender: 1,
             },
            {
              "iconId": "webExpend",
             "part": "right",
              "defaultActive": 0,
               "memo": "网页全屏按钮",
               "isrender": 1
             },
            {
              iconId: 'expend',
              part: 'right',
              defaultActive: 0,
              memo: '全局全屏按钮',
              isrender: 1,
            },
          ],
        },
      },

js部分

//获取萤石token 
getAccessToken().then((res2) => {
        //获取具体的视频数据
        getVideoList().then((res) => {
         
          player = new EZUIKit.EZUIKitPlayer({
            id: 'video-container', // 视频容器ID
            accessToken: res2.body,
            url:
              'ezopen://open.ys7.com/' +
              res.body[0].deviceSerial +
              '/' +
              res.body[0].channelNo +
              '.live',
            // simple - 极简版; pcLive-pc直播；pcRec-pc回放；mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
            // template: 'standard',//此处可以自选控件
            themeData: this.themeData,//此处可以进行自定义控件，进行按钮自定义
            plugin: ['talk'], // 加载插件，talk-对讲
            width: 300,
            height: 200,
            //以下函数可以不需要，可以实现播放多少秒自动暂停功能
            handleSuccess: () => {
               setTimeout(() => {
                 player && player.stop()
                 console.log('设置定时器暂停')
               }, 18000)
               // console.log("播放成功回调函数，此处可执行播放成功后续动作");
             },
          })
          
          window.player = player
        })
      })

可参考的官网：

ezuikit-js - npm (npmjs.com)

EZUIKit-JavaScript-npm - npm 中文文档 (npmrc.cn)

文档概述 · 萤石开放平台API文档 (ys7.com)