Merge branch 'dev-ft' into 'main'

fix：修改视频预览

See merge request huang/yun-teng-iot-front!223

@@ -46,6 +46,7 @@
     "cropperjs": "^1.5.12",
     "cropperjs": "^1.5.12",
     "crypto-js": "^4.1.1",
     "crypto-js": "^4.1.1",
     "echarts": "^5.1.2",
     "echarts": "^5.1.2",
+    "hls.js": "^1.0.10",
     "intro.js": "^4.1.0",
     "intro.js": "^4.1.0",
     "jsoneditor": "^9.7.2",
     "jsoneditor": "^9.7.2",
     "jwt-decode": "^3.1.2",
     "jwt-decode": "^3.1.2",
@@ -65,7 +66,7 @@
     "vue-json-pretty": "^2.0.4",
     "vue-json-pretty": "^2.0.4",
     "vue-router": "^4.0.11",
     "vue-router": "^4.0.11",
     "vue-types": "^4.0.3",
     "vue-types": "^4.0.3",
-    "vue3-video-play": "^1.3.1-beta.6",
+    "vue3-video-play": "^1.3.1-beta.4",
     "xlsx": "^0.17.0"
     "xlsx": "^0.17.0"
   },
   },
   "devDependencies": {
   "devDependencies": {
@@ -140,6 +141,20 @@
     "vue-eslint-parser": "^7.10.0",
     "vue-eslint-parser": "^7.10.0",
     "vue-tsc": "^0.2.3"
     "vue-tsc": "^0.2.3"
   },
   },
+  "keywords": [
+    "vue 3",
+    "vue3",
+    "vue",
+    "vue3-video-play",
+    "hlsjs",
+    "hls.js",
+    "vue video player",
+    "vue3 video player",
+    "video player video",
+    "video player",
+    "vue player",
+    "vue video"
+  ],
   "resolutions": {
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
     "bin-wrapper": "npm:bin-wrapper-china",
     "bin-wrapper": "npm:bin-wrapper-china",

@@ -11,86 +11,71 @@
     >
     >
       <div class="video-sty">
       <div class="video-sty">
         <div>
         <div>
-          <vue3videoPlay :src="videoUrl" ref="videoRef" v-bind="options" :poster="videoPoster" />
+          <videoPlay
+            v-if="showVideo"
+            ref="video"
+            style="display: inline-block; width: 100%"
+            v-bind="options"
+          />
         </div>
         </div>
       </div>
       </div>
     </BasicModal>
     </BasicModal>
   </div>
   </div>
 </template>
 </template>
-<script lang="ts">
-  import { defineComponent, reactive, ref, nextTick } from 'vue';
+<script setup lang="ts">
+  import { ref, nextTick, reactive } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import vue3videoPlay from 'vue3-video-play'; // 引入组件
+  import { videoPlay } from 'vue3-video-play'; // 引入组件
   import 'vue3-video-play/dist/style.css'; // 引入css
   import 'vue3-video-play/dist/style.css'; // 引入css
 
 
-  export default defineComponent({
-    name: 'DialogPreviewVideo',
-    components: {
-      BasicModal,
-      vue3videoPlay,
-    },
-    emits: ['success', 'register'],
-    setup() {
-      let options: any = reactive({});
-      const videoRef: any = ref(null);
-      const videoUrl = ref<String>('');
-      const videoPoster = ref('');
-      const heightNum = ref(800);
-      const [register] = useModalInner(async (data) => {
-        if (data) {
-          if (data.record.videoUrl) {
-            videoUrl.value = data.record.videoUrl;
-            nextTick(() => {
-              /**
-               * options配置项(使用vue3-video-play插件)
-               * 新增支持m3u8流视频
-               */
-              const fileText = data.record?.videoUrl.split('.').pop();
-              videoPoster.value = data.record?.avatar;
-              options.width = '800px'; //播放器高度
-              options.height = '500px'; //播放器高度
-              options.color = ''; //主题色
-              options.type = fileText === 'm3u8' ? 'm3u8' : fileText === 'mp4' ? 'video/mp4' : '';
-              options.title = data.record?.name || '无'; //视频名称
-              options.src = data.record?.videoUrl || ''; //视频源
-              options.muted = false; //静音
-              options.webFullScreen = false;
-              options.speedRate = ['0.75', '1.0', '1.25', '1.5', '2.0']; //播放倍速
-              options.autoPlay = false; //自动播放
-              options.loop = false; //循环播放
-              options.mirror = false; //镜像画面
-              options.ligthOff = false; //关灯模式
-              options.volume = 0.3; //默认音量大小
-              options.control = true; //是否显示控制
-              options.controlBtns = [
-                'audioTrack',
-                'quality',
-                'speedRate',
-                'volume',
-                'setting',
-                'pip',
-                'pageFullScreen',
-                'fullScreen',
-              ]; //显示所有按钮,
-            });
-          }
-        }
-      });
-      const handleCancel = () => {
-        //关闭暂停播放视频
-        videoRef.value.pause();
-      };
-      return {
-        register,
-        handleCancel,
-        options,
-        heightNum,
-        videoPoster,
-        videoRef,
-        videoUrl,
-      };
-    },
+  const heightNum = ref(800);
+  const showVideo = ref(false);
+  const options = reactive({
+    width: '800px',
+    height: '450px',
+    color: '#409eff',
+    muted: false, //静音
+    webFullScreen: false,
+    autoPlay: true, //自动播放
+    currentTime: 0,
+    loop: false, //循环播放
+    mirror: false, //镜像画面
+    ligthOff: false, //关灯模式
+    volume: 0.3, //默认音量大小
+    control: true, //是否显示控制器
+    title: '', //视频名称
+    type: 'm3u8',
+    src: '', //视频源
+    controlBtns: [
+      'audioTrack',
+      'quality',
+      'speedRate',
+      'volume',
+      'setting',
+      'pip',
+      'pageFullScreen',
+      'fullScreen',
+    ],
   });
   });
+  const video: any = ref(null);
+
+  nextTick(() => {
+    console.log(video.value);
+  });
+
+  const [register] = useModalInner((data) => {
+    if (data) {
+      if (data.record.videoUrl) {
+        showVideo.value = true;
+        options.src = data.record.videoUrl;
+        options.autoPlay = true;
+      }
+    }
+  });
+  const handleCancel = () => {
+    //关闭暂停播放视频
+    video.value.pause();
+  };
 </script>
 </script>
 <style>
 <style>
   .video-sty {
   .video-sty {