yangjun
/
nursing_unit_vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MP3及MP4预览页面，关闭后仍然播放的问题

This commit is contained in:
yangjun 2025-08-01 15:16:29 +08:00
parent 62a144269a
commit 7770ca2941
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/services/serviceDirective/ConfigServiceDirectiveList.vue
View File

@ -232,7 +232,7 @@
<!-- 音频播放 --> <!-- 音频播放 -->
<a-modal v-model:visible="showAudioModal" title="音频播放" :footer="null" @cancel="closeAudioModal" <a-modal v-model:visible="showAudioModal" title="音频播放" :footer="null" @cancel="closeAudioModal"
:bodyStyle="{ padding: '0', maxHeight: '80vh', overflow: 'auto' }" :keyboard="true"> :bodyStyle="{ padding: '0', maxHeight: '80vh', overflow: 'auto' }" :keyboard="true">
<audio controls style="width: 100%; display: block; margin: 20px auto;"> <audio ref="audioPlayer" controls style="width: 100%; display: block; margin: 20px auto;">
<source :src="audioUrl"> <source :src="audioUrl">
您的浏览器不支持音频播放。 您的浏览器不支持音频播放。
</audio> </audio>
@ -241,7 +241,7 @@
<!-- 视频播放 --> <!-- 视频播放 -->
<a-modal v-model:visible="showVideoModal" title="视频播放" :footer="null" @cancel="closeVideoModal" <a-modal v-model:visible="showVideoModal" title="视频播放" :footer="null" @cancel="closeVideoModal"
:bodyStyle="{ padding: '0', maxHeight: '80vh', overflow: 'auto' }"> :bodyStyle="{ padding: '0', maxHeight: '80vh', overflow: 'auto' }">
<video controls style="width: 100%; max-height: 70vh; display: block; margin: 0 auto;"> <video ref="videoPlayer" controls style="width: 100%; max-height: 70vh; display: block; margin: 0 auto;">
<source :src="videoUrl"> <source :src="videoUrl">
您的浏览器不支持视频播放。 您的浏览器不支持视频播放。
</video> </video>
@ -583,6 +583,7 @@ function onEmotionTagClose() {
const showAudioModal = ref(false); // 控制音频模态框显示 const showAudioModal = ref(false); // 控制音频模态框显示
const audioUrl = ref(''); // 音频 URL const audioUrl = ref(''); // 音频 URL
const audioPlayer = ref(null);
// 打开音频模态框 // 打开音频模态框
const openAudioModal = (url) => { const openAudioModal = (url) => {
@ -592,12 +593,17 @@ const openAudioModal = (url) => {
// 关闭音频模态框 // 关闭音频模态框
const closeAudioModal = () => { const closeAudioModal = () => {
if (audioPlayer.value) {
audioPlayer.value.pause(); // 暂停音频播放
audioPlayer.value.currentTime = 0; // 可选：重置播放进度
}
showAudioModal.value = false; showAudioModal.value = false;
audioUrl.value = ''; audioUrl.value = '';
}; };
const showVideoModal = ref(false); // 控制模态框显示 const showVideoModal = ref(false); // 控制模态框显示
const videoUrl = ref(''); // 视频 URL const videoUrl = ref(''); // 视频 URL
const videoPlayer = ref(null);
// 打开视频模态框 // 打开视频模态框
const openVideoModal = (url) => { const openVideoModal = (url) => {
@ -607,12 +613,15 @@ const openVideoModal = (url) => {
// 关闭视频模态框 // 关闭视频模态框
const closeVideoModal = () => { const closeVideoModal = () => {
if (videoPlayer.value) {
videoPlayer.value.pause(); // 暂停视频播放
videoPlayer.value.currentTime = 0; // 可选：将播放进度重置到开始
}
showVideoModal.value = false; showVideoModal.value = false;
videoUrl.value = ''; videoUrl.value = '';
}; };
// 添加以下响应式变量 // 添加以下响应式变量
const audioPlayer = ref<HTMLAudioElement | null>(null);
const currentPlayingAudio = ref<string | null>(null); const currentPlayingAudio = ref<string | null>(null);
const isPlaying = ref(false); const isPlaying = ref(false);