fix(video-player): 修复视频播放器事件触发逻辑并优化音频停止处理
- 将视频播放器的play/pause事件处理从options移到模板事件监听器 - 修复播放器暴露方法中的事件触发,确保一致触发onPlay/onPause - 优化音频停止逻辑,仅处理包含音频的帖子 - 移除调试用的console.warn语句
Showing
2 changed files
with
19 additions
and
8 deletions
| ... | @@ -7,6 +7,8 @@ | ... | @@ -7,6 +7,8 @@ |
| 7 | playsinline | 7 | playsinline |
| 8 | :class="['video-player', 'vjs-big-play-centered', { loading: !state }]" | 8 | :class="['video-player', 'vjs-big-play-centered', { loading: !state }]" |
| 9 | @mounted="handleMounted" | 9 | @mounted="handleMounted" |
| 10 | + @play="handlePlay" | ||
| 11 | + @pause="handlePause" | ||
| 10 | /> | 12 | /> |
| 11 | </div> | 13 | </div> |
| 12 | </template> | 14 | </template> |
| ... | @@ -51,8 +53,8 @@ const videoOptions = computed(() => ({ | ... | @@ -51,8 +53,8 @@ const videoOptions = computed(() => ({ |
| 51 | type: "video/mp4", | 53 | type: "video/mp4", |
| 52 | }, | 54 | }, |
| 53 | ], | 55 | ], |
| 54 | - onPlay: () => emit("onPlay"), | 56 | + // onPlay: () => emit("onPlay"), |
| 55 | - onPause: () => emit("onPause"), | 57 | + // onPause: () => emit("onPause"), |
| 56 | userActions: { | 58 | userActions: { |
| 57 | hotkeys: true, | 59 | hotkeys: true, |
| 58 | doubleClick: true, | 60 | doubleClick: true, |
| ... | @@ -110,6 +112,13 @@ const handleMounted = (payload) => { | ... | @@ -110,6 +112,13 @@ const handleMounted = (payload) => { |
| 110 | } | 112 | } |
| 111 | }; | 113 | }; |
| 112 | 114 | ||
| 115 | +const handlePlay = (payload) => { | ||
| 116 | + emit("onPlay") | ||
| 117 | +}; | ||
| 118 | +const handlePause = (payload) => { | ||
| 119 | + emit("onPause") | ||
| 120 | +} | ||
| 121 | + | ||
| 113 | onBeforeUnmount(() => { | 122 | onBeforeUnmount(() => { |
| 114 | if (videoRef.value?.$player) { | 123 | if (videoRef.value?.$player) { |
| 115 | videoRef.value.$player.dispose(); | 124 | videoRef.value.$player.dispose(); |
| ... | @@ -120,11 +129,13 @@ defineExpose({ | ... | @@ -120,11 +129,13 @@ defineExpose({ |
| 120 | pause() { | 129 | pause() { |
| 121 | if (player.value) { | 130 | if (player.value) { |
| 122 | player.value?.pause(); | 131 | player.value?.pause(); |
| 132 | + emit('onPause', player.value); | ||
| 123 | } | 133 | } |
| 124 | }, | 134 | }, |
| 125 | play() { | 135 | play() { |
| 126 | if (player.value) { | 136 | if (player.value) { |
| 127 | player.value?.play(); | 137 | player.value?.play(); |
| 138 | + emit('onPlay', player.value); | ||
| 128 | } | 139 | } |
| 129 | }, | 140 | }, |
| 130 | }); | 141 | }); | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-05-29 15:34:17 | 2 | * @Date: 2025-05-29 15:34:17 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-05-30 18:02:35 | 4 | + * @LastEditTime: 2025-05-30 18:29:10 |
| 5 | * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue | 5 | * @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | --> | 7 | --> |
| ... | @@ -107,8 +107,8 @@ | ... | @@ -107,8 +107,8 @@ |
| 107 | } | 107 | } |
| 108 | } | 108 | } |
| 109 | }" | 109 | }" |
| 110 | - @onPlay="(player) => handleVideoPlay(player, post)" | 110 | + @onPlay="handleVideoPlay(player, post)" |
| 111 | - @onPause="() => handleVideoPause(post)" /> | 111 | + @onPause="handleVideoPause(post)" /> |
| 112 | <AudioPlayer | 112 | <AudioPlayer |
| 113 | v-if="post.audio.length" | 113 | v-if="post.audio.length" |
| 114 | :songs="post.audio" | 114 | :songs="post.audio" |
| ... | @@ -197,7 +197,6 @@ const startPlay = (post) => { | ... | @@ -197,7 +197,6 @@ const startPlay = (post) => { |
| 197 | * @param {Object} post - 包含视频的帖子对象 | 197 | * @param {Object} post - 包含视频的帖子对象 |
| 198 | */ | 198 | */ |
| 199 | const handleVideoPlay = (player, post) => { | 199 | const handleVideoPlay = (player, post) => { |
| 200 | - console.warn(0); | ||
| 201 | stopAllAudio(); | 200 | stopAllAudio(); |
| 202 | }; | 201 | }; |
| 203 | 202 | ||
| ... | @@ -266,7 +265,6 @@ const stopAllAudio = () => { | ... | @@ -266,7 +265,6 @@ const stopAllAudio = () => { |
| 266 | // 确保audioPlayers.value是一个数组 | 265 | // 确保audioPlayers.value是一个数组 |
| 267 | if (!audioPlayers.value) return; | 266 | if (!audioPlayers.value) return; |
| 268 | audioPlayers.value?.forEach(player => { | 267 | audioPlayers.value?.forEach(player => { |
| 269 | - console.warn(player); | ||
| 270 | // 使用组件暴露的pause方法 | 268 | // 使用组件暴露的pause方法 |
| 271 | if (typeof player.pause === 'function') { | 269 | if (typeof player.pause === 'function') { |
| 272 | player.pause(); | 270 | player.pause(); |
| ... | @@ -274,7 +272,9 @@ const stopAllAudio = () => { | ... | @@ -274,7 +272,9 @@ const stopAllAudio = () => { |
| 274 | }); | 272 | }); |
| 275 | // 更新所有帖子的播放状态 | 273 | // 更新所有帖子的播放状态 |
| 276 | mockPosts.value.forEach(post => { | 274 | mockPosts.value.forEach(post => { |
| 277 | - post.isPlaying = false; | 275 | + if (post.audio.length) { |
| 276 | + post.isPlaying = false; | ||
| 277 | + } | ||
| 278 | }); | 278 | }); |
| 279 | } | 279 | } |
| 280 | 280 | ... | ... |
-
Please register or login to post a comment