(vue项目)ezuikit-js萤石组件的封装

最新推荐文章于 2026-05-08 05:46:33 发布

原创

最新推荐文章于 2026-05-08 05:46:33 发布 · 1.8k 阅读

标签

#javascript #vue.js #前端

收录于

文章介绍了如何使用EZUIKit在JavaScript中创建视频播放器，并管理全屏、监控页面大小调整以及加载各种插件的功能。

//html部分
<video
      :id="id"
      ref="fullscreen"
      poster="../../../assets/videoDemo.png"
      style="width: 100%;object-fit: cover;"
      >
/>

//js部分
<script>
import EZUIKit from 'ezuikit-js'
export default {
  name: 'HelloWorld',
  data() {
    return {
      player: null,
      // 弹窗
      Visiable: false,
      // 全屏
      isFullscreen: false,
      // 设置按钮
      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: '顶部设