|
|
@@ -1,83 +0,0 @@
|
|
|
-# 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配置
|
|
|
-- 验证视频格式和编码兼容性
|
