背景

页面模块同时有个四个视频模块，发现可以同时播放四个视频，但是理想的是每次只播放一个。

旧代码：

<div class="list-item" v-for="item of VIDEO_TYPES" :key="item.title"><videoref="videosRef"class="video"playsinlinemutedwebkit-playsinlinepreload="auto"x5-video-player-type="h5-page"controls:poster="item.poster":src="item.video"></video></div>

1. 首先介绍下 muted 属性

一个布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。

视频静音的情况下，IOS 可以同时播放多个，所以把这个属性去掉，IOS 每次就只能播放一个了，但是 Android 比较特殊，即使去到这个属性也还是可以同时播放多个视频。

2. 监听播放和暂停操作

在每次点击播放的时候，先停止所有视频，然后在播放正在点击的视频。

 <div class="list-item" v-for="item of VIDEO_TYPES" :key="item.title"><videoref="videosRef"class="video"playsinlinewebkit-playsinlinepreload="auto"x5-video-player-type="h5-page"controls:poster="item.poster":src="item.video"@play="onPlay(item.video)"@pause="onPause(item.video)"></video><div class="title">{{ item.title }}</div></div>const activeVideoId = ref('');const onPlay = (videoId) => {if (isIOS) return; // IOS不需要处理，不然会有点击的卡顿感// 如果已有视频在播放，暂停它if (activeVideoId.value && activeVideoId.value !== videoId) {const activeVideo = videosRef.value.find((video) => {return video.src === activeVideoId.value;});if (activeVideo) {activeVideo.pause();}}activeVideoId.value = videoId; // 设置当前播放的视频
};
// 视频暂停时触发
const onPause = (videoId) => {if (isIOS) return;if (activeVideoId.value === videoId) {activeVideoId.value = null; // 清除当前播放的视频 ID}
};

3. 视频播放完毕后返回桌面，再进入H5页面发现视频封面丢失置灰

可能原因：
当你退出视频播放页面（例如最小化到桌面），浏览器可能会暂停页面的 JavaScript 执行或丢失某些页面状态。导致重新进入页面时，视频封面未被正确恢复。

解决思路：

确保封面重新加载：

在页面重新进入时，强制重新加载封面图像。你可以通过监听 visibilitychange 事件或使用 onfocus 事件来确保封面图像的状态恢复。

const refreshVideo = () => {const videos = document.querySelectorAll('video');// 遍历每个 video 元素videos.forEach((video) => {const src = video.getAttribute('src');const wasPlaying = !video.paused;video.setAttribute('src', '');video.setAttribute('src', src);if (wasPlaying) {video.play();} else {// 重新加载视频video.load();}});
};onMounted(() => {document.addEventListener('visibilitychange', refreshVideo);});
onBeforeMount(() => {document.removeEventListener('visibilitychange', refreshVideo);
});