hookehuyr

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

- 将视频播放器的play/pause事件处理从options移到模板事件监听器
- 修复播放器暴露方法中的事件触发,确保一致触发onPlay/onPause
- 优化音频停止逻辑,仅处理包含音频的帖子
- 移除调试用的console.warn语句
......@@ -7,6 +7,8 @@
playsinline
:class="['video-player', 'vjs-big-play-centered', { loading: !state }]"
@mounted="handleMounted"
@play="handlePlay"
@pause="handlePause"
/>
</div>
</template>
......@@ -51,8 +53,8 @@ const videoOptions = computed(() => ({
type: "video/mp4",
},
],
onPlay: () => emit("onPlay"),
onPause: () => emit("onPause"),
// onPlay: () => emit("onPlay"),
// onPause: () => emit("onPause"),
userActions: {
hotkeys: true,
doubleClick: true,
......@@ -110,6 +112,13 @@ const handleMounted = (payload) => {
}
};
const handlePlay = (payload) => {
emit("onPlay")
};
const handlePause = (payload) => {
emit("onPause")
}
onBeforeUnmount(() => {
if (videoRef.value?.$player) {
videoRef.value.$player.dispose();
......@@ -120,11 +129,13 @@ defineExpose({
pause() {
if (player.value) {
player.value?.pause();
emit('onPause', player.value);
}
},
play() {
if (player.value) {
player.value?.play();
emit('onPlay', player.value);
}
},
});
......
<!--
* @Date: 2025-05-29 15:34:17
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-05-30 18:02:35
* @LastEditTime: 2025-05-30 18:29:10
* @FilePath: /mlaj/src/views/checkin/IndexCheckInPage.vue
* @Description: 文件描述
-->
......@@ -107,8 +107,8 @@
}
}
}"
@onPlay="(player) => handleVideoPlay(player, post)"
@onPause="() => handleVideoPause(post)" />
@onPlay="handleVideoPlay(player, post)"
@onPause="handleVideoPause(post)" />
<AudioPlayer
v-if="post.audio.length"
:songs="post.audio"
......@@ -197,7 +197,6 @@ const startPlay = (post) => {
* @param {Object} post - 包含视频的帖子对象
*/
const handleVideoPlay = (player, post) => {
console.warn(0);
stopAllAudio();
};
......@@ -266,7 +265,6 @@ const stopAllAudio = () => {
// 确保audioPlayers.value是一个数组
if (!audioPlayers.value) return;
audioPlayers.value?.forEach(player => {
console.warn(player);
// 使用组件暴露的pause方法
if (typeof player.pause === 'function') {
player.pause();
......@@ -274,7 +272,9 @@ const stopAllAudio = () => {
});
// 更新所有帖子的播放状态
mockPosts.value.forEach(post => {
if (post.audio.length) {
post.isPlaying = false;
}
});
}
......