vue 引入萤石视频（亲测有用）_vue ezuikit-优快云博客

本文链接：https://blog.youkuaiyun.com/xue_tingting/article/details/135673526

本文介绍了如何在HTML中通过ezuikit.js库实现视频播放，包括下载文件、设置视频容器、定义宽高、使用EZUIKitPlayer播放器以及自定义参数如模板和插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先下载ezuikit.js 文件放入目录下

2、之后在html 文件映入

3、定义一个容器

  // divW和divH是获取了父级宽高 使播放容器能铺满div
            let divW = this.$refs.viewtools.clientWidth
            let divH = this.$refs.viewtools.clientHeight
            player = new EZUIKit.EZUIKitPlayer({
                id: 'video-container', // 视频容器ID
                accessToken: val,
                url:
                    'ezopen://open.ys7.com/' +
                    this.typeList.serialNum +  // serialNum  channelNum  通道号 序列号必须引入
                    '/' +
                    this.typeList.channelNum +
                    '.rec',
                // 官方url例子：ezopen://open.ys7.com/G39444019/1.live 也可并非.live结尾 详见GitHub
                // 播放主题  simple-极简版; standard-标准版; security-安防版; voice-语音版; 自定义主题详见GitHub
                template: 'simple',
                autoplay: true,
                // // useHardDev: true,
                // width: 408,
                // height: 237, // 开启高性能模式 依赖需高于7.7.x 截止到2023.11.7 建议保持最新版本为7.7.6
                // plugin: ["talk"], // 加载插件，talk-对讲 非必填
                width: divW, // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
                height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
            })
            player.play()