迁移大屏UI库和应用

project/dvui/components/AiMonitor/dhVideo.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="dh-video">
+    <video :id="id" autoplay class="video-js vjs-default-skin" style="width: 100%; height: 100%;" controls>
+      <source :src="src">
+    </video>
+  </div>
+</template>
+
+<script>
+  import videojs from 'video.js'
+  import 'videojs-contrib-hls'
+  import 'video.js/dist/video-js.css'
+
+  export default {
+    props: ['src'],
+
+    data () {
+      return {
+        id: `video-${new Date().getTime()}`
+      }
+    },
+
+    watch: {
+      src: {
+        handler(val) {
+          if (val) {
+            this.$nextTick(() => {
+              videojs(this.id, {
+                autoplay: true
+              }, function () { console.log('videojs播放器初始化成功') })
+            })
+          }
+        },
+        immediate: true,
+        deep: true
+      }
+    },
+
+    mounted () {
+      if (this.src) {
+        this.$nextTick(() => {
+           videojs(this.id, {
+            autoplay: true
+          }, function () { console.log('videojs播放器初始化成功') })
+        })
+      }
+    }
+  }
+</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>