zhibo/m3u8_fix_summary.md

m3u8视频黑屏问题修复总结

问题描述

在iPhone或macOS小程序模拟器中播放m3u8格式的视频会出现黑屏现象，特别是在liveType === 2的录播模式下。

修复方案

1. 优化video组件属性配置

• 启用缓存: 将custom-cache和http-cache设置为true，改善m3u8流的缓存处理
• 添加poster属性: 设置poster="liveItem.coverUrl || ''"，为iOS设备提供视频封面
• 预加载设置: 添加preload="auto"，确保视频资源提前加载
• iOS兼容性: 添加playsinline="true"和webkit-playsinline="true"，支持iOS内联播放
• X5内核优化: 添加x5相关属性，优化在微信环境下的播放体验

2. 播放逻辑优化

• 平台检测: 添加iOS设备检测逻辑
• 延迟播放: iOS设备延迟500ms播放，给video元素更多初始化时间
• 错误重试: 针对iOS+m3u8组合增加重试次数(5次)和延迟时间(3秒)

3. 错误处理增强

• 格式检测: 识别m3u8格式并提供针对性处理
• 重新初始化: iOS设备播放失败时，先停止再重新播放
• 用户提示: 提供更明确的错误信息

4. 用户体验改善

• 加载状态: 添加视频加载动画和状态提示
• 平台提示: 根据设备类型显示不同的加载文本
• 视觉反馈: 添加旋转动画和半透明遮罩

修改的文件

• pages_course/living.vue: 主要修改文件

关键修改点

video组件配置

<video v-if="liveItem.videoUrl&&liveItem.liveType==2" 
       :id="`myVideo_${liveId}`" 
       :autoplay="true"
       class="item" 
       :src="liveItem.videoUrl" 
       :controls="false" 
       object-fit="contain"
       :custom-cache="true" 
       :http-cache="true" 
       :poster="liveItem.coverUrl || ''"
       preload="auto" 
       :playsinline="true" 
       :webkit-playsinline="true"
       x5-video-player-type="h5" 
       x5-video-player-fullscreen="true"
       x5-video-orientation="portraint"
       @loadstart="onVideoLoadStart" 
       @canplay="onVideoCanPlay"
       @error="videoError">
</video>

iOS延迟播放逻辑

const systemInfo = uni.getSystemInfoSync();
const isIOS = systemInfo.platform === 'ios' || systemInfo.system.toLowerCase().includes('ios');

if (isIOS) {
    setTimeout(() => {
        videoContext.play();
        console.log('iOS设备延迟播放m3u8视频');
    }, 500);
} else {
    videoContext.play();
}

测试建议

1. 在iPhone真机上测试m3u8视频播放
2. 在macOS小程序模拟器中测试
3. 验证加载状态提示是否正常显示
4. 测试错误重试机制是否有效

注意事项

• 确保m3u8视频源的CORS配置正确
• 检查视频服务器的HTTPS配置
• 验证视频格式和编码兼容性