构建版本修改

components/AiMonitor/dhVideo.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="dh-video" style="height: 100%;">
+    <video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
+      <source :src="src">
+    </video>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: ['src'],
+
+  data() {
+    return {
+      id: `video-${Math.ceil(Math.random() * 1000000)}`
+    }
+  },
+  methods: {
+    loadLib() {
+      const promise = url => new Promise(resolve => this.$injectLib(url, () => resolve())),
+          promiseCss = url => new Promise(resolve => this.$injectCss(url, () => resolve()))
+      return Promise.all([
+        promiseCss("//cdn.cunwuyun.cn/videojs/video-js.min.css"),
+        promise("//cdn.cunwuyun.cn/videojs/video.min.js"),
+        promise("//cdn.cunwuyun.cn/videojs/videojs-contrib-hls.js"),
+      ])
+    },
+    initVideoJs(count = 0) {
+      if (!!videojs) {
+        videojs(this.id, {
+          autoplay: true
+        }, function () {
+          console.log('videojs播放器初始化成功')
+        })
+      } else if (count < 10) {
+        setTimeout(() => this.initVideoJs(), 200)
+      } else console.error("videojs加载失败!")
+    }
+  },
+  watch: {
+    src: {
+      handler(val) {
+        if (val) {
+          this.initVideoJs()
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    this.loadLib()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.dh-video {
+  width: 100%;
+  height: 100%;
+
+  .video-js {
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  ::v-deep .video-js {
+    width: 100% !important;
+    height: 100% !important;
+
+    .vjs-big-play-button {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  & > div {
+    width: 100% !important;
+    height: 100% !important;
+  }
+}
+</style>