hookehuyr

refactor(视频播放器): 移除重复的视频播放控制逻辑

移除`HomePage.vue`中重复的视频播放控制逻辑,简化代码结构。同时隐藏`VideoPlayer.vue`中的大播放按钮,提升用户体验。
...@@ -103,4 +103,8 @@ defineExpose({ ...@@ -103,4 +103,8 @@ defineExpose({
103 .video-player.loading { 103 .video-player.loading {
104 opacity: 0.6; 104 opacity: 0.6;
105 } 105 }
106 +
107 +:deep(.vjs-big-play-button) {
108 + display: none !important;
109 +}
106 </style> 110 </style>
......
1 <!-- 1 <!--
2 * @Date: 2025-03-20 19:55:21 2 * @Date: 2025-03-20 19:55:21
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-03-24 17:41:55 4 + * @LastEditTime: 2025-03-24 18:00:18
5 * @FilePath: /mlaj/src/views/HomePage.vue 5 * @FilePath: /mlaj/src/views/HomePage.vue
6 * @Description: 亲子学院首页组件 6 * @Description: 亲子学院首页组件
7 * 7 *
...@@ -499,7 +499,6 @@ ...@@ -499,7 +499,6 @@
499 v-else 499 v-else
500 :video-url="item.video_url" 500 :video-url="item.video_url"
501 ref="videoPlayerRefs" 501 ref="videoPlayerRefs"
502 - @onPlay="handleVideoPlay(index)"
503 /> 502 />
504 </div> 503 </div>
505 </div> 504 </div>
...@@ -538,22 +537,10 @@ const videoPlayerRefs = ref([]); // 视频播放器组件引用数组 ...@@ -538,22 +537,10 @@ const videoPlayerRefs = ref([]); // 视频播放器组件引用数组
538 537
539 // 播放视频处理函数 538 // 播放视频处理函数
540 const playVideo = (index, videoUrl) => { 539 const playVideo = (index, videoUrl) => {
541 - // 如果当前有其他视频在播放,先暂停它
542 - if (activeVideoIndex.value !== null && activeVideoIndex.value !== index) {
543 - videoPlayerRefs.value[activeVideoIndex.value]?.pause();
544 - }
545 // 更新当前播放的视频索引 540 // 更新当前播放的视频索引
546 activeVideoIndex.value = index; 541 activeVideoIndex.value = index;
547 }; 542 };
548 543
549 -// 视频播放事件处理
550 -const handleVideoPlay = (index) => {
551 - // 确保同一时间只有一个视频在播放
552 - if (activeVideoIndex.value !== null && activeVideoIndex.value !== index) {
553 - videoPlayerRefs.value[activeVideoIndex.value]?.pause();
554 - }
555 -};
556 -
557 // 路由相关 544 // 路由相关
558 const $route = useRoute() 545 const $route = useRoute()
559 useTitle($route.meta.title) // 设置页面标题 546 useTitle($route.meta.title) // 设置页面标题
......