# 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组件配置
```vue
<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延迟播放逻辑
```javascript
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配置
- 验证视频格式和编码兼容性