feat(视频播放器): 添加触摸模拟器支持以优化移动端交互

在移动端设备上，添加了@vant/touch-emulator依赖并引入触摸模拟器，以优化视频播放器的交互体验。具体修改包括在VideoPlayer.vue中添加touchstart事件监听，实现点击播放/暂停功能，并确保点击控制栏区域时不触发自定义行为。

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "version": "0.0.0",
       "dependencies": {
       "dependencies": {
         "@heroicons/vue": "^2.2.0",
         "@heroicons/vue": "^2.2.0",
+        "@vant/touch-emulator": "^1.4.0",
         "@vant/use": "^1.6.0",
         "@vant/use": "^1.6.0",
         "@videojs-player/vue": "^1.0.0",
         "@videojs-player/vue": "^1.0.0",
         "dayjs": "^1.11.13",
         "dayjs": "^1.11.13",
@@ -1214,6 +1215,11 @@
       "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
       "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
       "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
       "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
     },
     },
+    "node_modules/@vant/touch-emulator": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vant/touch-emulator/-/touch-emulator-1.4.0.tgz",
+      "integrity": "sha512-Zt+zISV0+wpOew2S1siOJ3G22y+hapHAKmXM+FhpvWzsRc4qahaYXatCAITuuXt0EcDp7WvEeTO4F7p9AtX/pw=="
+    },
     "node_modules/@vant/use": {
     "node_modules/@vant/use": {
       "version": "1.6.0",
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.6.0.tgz",
       "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.6.0.tgz",

@@ -16,6 +16,7 @@
   },
   },
   "dependencies": {
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
     "@heroicons/vue": "^2.2.0",
+    "@vant/touch-emulator": "^1.4.0",
     "@vant/use": "^1.6.0",
     "@vant/use": "^1.6.0",
     "@videojs-player/vue": "^1.0.0",
     "@videojs-player/vue": "^1.0.0",
     "dayjs": "^1.11.13",
     "dayjs": "^1.11.13",

@@ -16,6 +16,7 @@ import { ref, computed, onMounted, onBeforeUnmount, defineProps, defineEmits } f
 import { VideoPlayer } from "@videojs-player/vue";
 import { VideoPlayer } from "@videojs-player/vue";
 import videojs from "video.js";
 import videojs from "video.js";
 import "video.js/dist/video-js.css";
 import "video.js/dist/video-js.css";
+import { wxInfo } from "@/utils/tools"
 
 
 const props = defineProps({
 const props = defineProps({
   options: {
   options: {
@@ -68,6 +69,27 @@ const handleMounted = (payload) => {
   player.value = payload.player;
   player.value = payload.player;
   if (player.value) {
   if (player.value) {
     player.value.play();
     player.value.play();
+    if (!wxInfo().isPc) {
+      // 添加touchstart事件监听
+      player.value.on('touchstart', (event) => {
+        // 阻止事件冒泡，避免触发controls的默认行为
+        event.preventDefault();
+        event.stopPropagation();
+
+        // 检查点击位置是否在controls区域
+        const controlBar = player.value.getChild('ControlBar');
+        const controlBarEl = controlBar && controlBar.el();
+        if (controlBarEl && controlBarEl.contains(event.target)) {
+          return; // 如果点击在controls区域，不执行自定义行为
+        }
+
+        if (player.value.paused()) {
+          player.value.play();
+        } else {
+          player.value.pause();
+        }
+      });
+    }
   }
   }
 };
 };
 
 

 /*
 /*
  * @Date: 2025-03-20 20:36:36
  * @Date: 2025-03-20 20:36:36
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-24 13:52:52
+ * @LastEditTime: 2025-03-24 23:32:16
  * @FilePath: /mlaj/src/main.js
  * @FilePath: /mlaj/src/main.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -11,6 +11,7 @@ import App from './App.vue'
 import router from './router'
 import router from './router'
 import axios from '@/utils/axios';
 import axios from '@/utils/axios';
 import 'vant/lib/index.css'
 import 'vant/lib/index.css'
+import '@vant/touch-emulator';
 
 
 const app = createApp(App)
 const app = createApp(App)
 // 屏蔽警告信息
 // 屏蔽警告信息