hookehuyr

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

在移动端设备上,添加了@vant/touch-emulator依赖并引入触摸模拟器,以优化视频播放器的交互体验。具体修改包括在VideoPlayer.vue中添加touchstart事件监听,实现点击播放/暂停功能,并确保点击控制栏区域时不触发自定义行为。
......@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@heroicons/vue": "^2.2.0",
"@vant/touch-emulator": "^1.4.0",
"@vant/use": "^1.6.0",
"@videojs-player/vue": "^1.0.0",
"dayjs": "^1.11.13",
......@@ -1214,6 +1215,11 @@
"resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
"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": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vant/use/-/use-1.6.0.tgz",
......
......@@ -16,6 +16,7 @@
},
"dependencies": {
"@heroicons/vue": "^2.2.0",
"@vant/touch-emulator": "^1.4.0",
"@vant/use": "^1.6.0",
"@videojs-player/vue": "^1.0.0",
"dayjs": "^1.11.13",
......
......@@ -16,6 +16,7 @@ import { ref, computed, onMounted, onBeforeUnmount, defineProps, defineEmits } f
import { VideoPlayer } from "@videojs-player/vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
import { wxInfo } from "@/utils/tools"
const props = defineProps({
options: {
......@@ -68,6 +69,27 @@ const handleMounted = (payload) => {
player.value = payload.player;
if (player.value) {
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
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-24 13:52:52
* @LastEditTime: 2025-03-24 23:32:16
* @FilePath: /mlaj/src/main.js
* @Description: 文件描述
*/
......@@ -11,6 +11,7 @@ import App from './App.vue'
import router from './router'
import axios from '@/utils/axios';
import 'vant/lib/index.css'
import '@vant/touch-emulator';
const app = createApp(App)
// 屏蔽警告信息
......