<div v-if="state.audioList.length > 0">
<audio
v-for="(item, index) in state.audioList"
:key="index"
style="width: 100%; margin-top: 10px"
:src="item"
controls
controlsList="nodownload"
class="myAudioContent"
@play="handlePlay(index, 'audio')"
/>
</div>
<div v-if="state.videoList.length > 0">
<video
v-for="(item, index) in state.videoList"
:key="index"
style="width: 100%; margin-top: 10px"
controls
:src="item"
controlsList="nodownload"
class="myVideoContent"
@play="handlePlay(index, 'video')"
/>
</div>
/* 控制同一页面只有一个音频或视频在播放*/
function handlePlay(index, type) {
const videoElement = document.getElementsByClassName('myVideoContent')
const audioElement = document.getElementsByClassName('myAudioContent')
const playElement = type === 'audio' ? audioElement : videoElement
if (playElement && playElement.length > 0) {
for (let i = 0; i < playElement.length; i++) {
if (i === index) {
playElement[i].play()
pauseOtherVideo(playElement[i], type)
}
}
}
}
function pauseOtherVideo(element, type) {
const allVideoElement = document.getElementsByTagName('video')
const allAudioElement = document.getElementsByTagName('audio')
const pauseElement = type === 'audio' ? allAudioElement : allVideoElement
if (pauseElement && pauseElement.length > 0) {
for (let i = 0; i < pauseElement.length; i++) {
if (pauseElement[i] !== element) {
pauseElement[i].pause()
}
}
}
if (type === 'audio') {
if (allVideoElement && allVideoElement.length > 0) {
for (let i = 0; i < allVideoElement.length; i++) {
allVideoElement[i].pause()
}
}
} else {
if (allAudioElement && allAudioElement.length > 0) {
for (let i = 0; i < allAudioElement.length; i++) {
allAudioElement[i].pause()
}
}
}
}