Merge pull request #10059 from dataease/pr@dev-v2@refactor_video

refactor(仪表板): 更换视频组件解决视频组件不能在IOS上播放的问题

core/core-frontend/package.json

@@ -20,6 +20,7 @@
     "@codemirror/lang-sql": "^6.4.0",
     "@npkg/tinymce-plugins": "^0.0.7",
     "@tinymce/tinymce-vue": "^5.1.0",
+    "@videojs-player/vue": "^1.0.0",
     "@vueuse/core": "^9.13.0",
     "ace-builds": "^1.15.3",
     "axios": "^1.3.3",
@@ -46,6 +47,7 @@
     "snowflake-id": "^1.1.0",
     "tinymce": "^5.8.2",
     "vant": "^4.8.3",
+    "video.js": "^8.12.0",
     "vue": "^3.3.4",
     "vue-clipboard3": "^2.0.0",
     "vue-codemirror": "^6.1.1",
@@ -54,7 +56,6 @@
     "vue-types": "^5.0.2",
     "vue-uuid": "^3.0.0",
     "vue3-ace-editor": "^2.2.2",
-    "vue3-video-play": "^1.3.2",
     "vuedraggable": "^4.1.0",
     "web-storage-cache": "^1.1.1",
     "xss": "^1.0.14"

core/core-frontend/src/custom-component/component-list.ts

@@ -26,21 +26,20 @@ export const VIDEO_LINKS_DE2 = {
   videoType: 'web',
   poster: null,
   web: {
-    width: '100%', //播放器宽度
-    height: '100%', //播放器高度
-    color: '#409eff', //主题色
-    title: '', //视频名称
     src: null, //视频源
-    muted: false, //静音
-    webFullScreen: false,
-    speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
-    autoPlay: true, //自动播放
-    loop: false, //循环播放
-    mirror: false, //镜像画面
-    lightOff: false, //关灯模式
-    volume: 0.3, //默认音量大小
-    control: true, //是否显示控制
-    controlBtns: ['audioTrack', 'quality', 'volume', 'fullScreen'] //显示所有按钮,
+    autoplay: true, // 如果true,浏览器准备好时开始回放。
+    muted: true, // 默认情况下将会消除任何音频。
+    loop: true, // 导致视频一结束就重新开始。
+    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+    language: 'zh-CN',
+    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+    controls: true,
+    controlBar: {
+      timeDivider: true,
+      remainingTimeDisplay: false,
+      fullscreenToggle: true // 全屏按钮
+    }
   },
   rtmp: {
     sources: [

core/core-frontend/src/custom-component/de-video/Component.vue

@@ -1,7 +1,7 @@
 <template>
   <el-row ref="mainPlayer">
     <div v-if="element.videoLinks[element.videoLinks.videoType].src" class="player">
-      <video-play v-bind="playerOptions" />
+      <VideoPlayer :src="playerOptions.src" :options="playerOptions" />
     </div>
     <div v-else class="info-class">
       <span>{{ t('visualization.video_add_tips') }}</span>
@@ -10,8 +10,8 @@
 </template>
 
 <script setup lang="ts">
-import { videoPlay } from 'vue3-video-play/lib/index' // 引入组件
-import 'vue3-video-play/dist/style.css' // 引入css
+import { VideoPlayer } from '@videojs-player/vue'
+import 'video.js/dist/video-js.css'
 import { computed, nextTick, reactive, toRefs, watch, onMounted, ref } from 'vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { useI18n } from '@/hooks/web/useI18n'

core/core-frontend/src/custom-component/de-video/VideoLinks.vue

@@ -5,7 +5,7 @@
         <el-switch
           :effect="themes"
           @change="onChange"
-          v-model="state.linkInfoTemp[state.linkInfoTemp.videoType].autoPlay"
+          v-model="state.linkInfoTemp[state.linkInfoTemp.videoType].autoplay"
           size="mini"
         />
       </el-form-item>