hookehuyr

fix(video-player): 修复视频播放器事件触发逻辑并优化音频停止处理

- 将视频播放器的play/pause事件处理从options移到模板事件监听器
- 修复播放器暴露方法中的事件触发,确保一致触发onPlay/onPause
- 优化音频停止逻辑,仅处理包含音频的帖子
- 移除调试用的console.warn语句
...@@ -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
......