refactor(视频播放器): 移除重复的视频播放控制逻辑
移除`HomePage.vue`中重复的视频播放控制逻辑,简化代码结构。同时隐藏`VideoPlayer.vue`中的大播放按钮,提升用户体验。
Showing
2 changed files
with
5 additions
and
14 deletions
| 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) // 设置页面标题 | ... | ... |
-
Please register or login to post a comment