video+hls处理视频，遇到的播放问题

Question

遇到的问题：ios加载完视频播放的瞬间，画面由小变大的显示，导致视觉效果不是很好。Android没有这种问题。如图：

使用的技术：使用uniapp+swiper+video来做上下切换的多视频播放，不是多个video预加载，只使用一个video，视频源使用加密的.m3u8视频，为了处理ios能自动播放，使用hls.js来处理视频源。

请问有没有好朋友遇到过这种问题？

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

您想要解决的问题

您提问的目的是解决在使用uni-app结合swiper和video组件进行上下切换的多视频播放时，在iOS设备上遇到的播放问题。具体问题是在iOS设备上加载视频后，播放瞬间画面会由小变大，造成视觉效果不佳，而Android设备上没有这个问题。

图片内容

1. 第一张图片（文档编号1）显示了视频播放界面的截图，可能表示视频播放时的初始状态。
2. 第二张图片（文档编号2）同样显示了视频播放界面的截图，可能表示视频播放时的某个状态，其中包含了集数信息和作者信息。
3. 第三张图片（文档编号3）包含了HTML代码片段，展示了使用的swiper组件和video组件的Vue模板代码，其中涉及到视频的自动播放、错误处理、加载等事件处理。

问题出现原因

问题可能出现的原因有：

• iOS和Android平台差异：iOS和Android在处理视频播放时的API和行为可能存在差异，这可能导致在iOS上出现特定的播放问题。
• 视频源处理：使用加密的.m3u8视频源，并通过hls.js处理，可能在iOS上存在兼容性或者处理方式上的问题。
• CSS/JS动画或过渡效果：如果Swiper组件在切换视频时使用了动画效果，可能在iOS上的渲染和性能表现与Android不同。

问题解决方案

1. 检查hls.js的配置：确保hls.js在iOS上配置正确，尝试更新到最新版本或查看是否有特定的iOS优化配置。
2. 优化视频播放器的CSS/JS：检查是否有可能导致iOS上渲染问题的CSS/JS代码，特别是与视频播放器相关的动画或过渡效果。
3. 限制视频播放器的尺寸：在iOS上，尝试设置视频播放器的最大尺寸，避免在播放时出现尺寸变化。
4. 使用Web视图：如果问题持续存在，考虑在iOS上使用Web视图（webview）来加载视频，可能获得更好的兼容性。

提供代码

由于没有具体的代码示例，只能提供一些可能的解决方案的代码片段：

// 确保video元素的尺寸在iOS上是固定的
video {
  max-width: 100%;
  height: auto;
}

// 检查hls.js的初始化配置
if (Hls.isSupported()) {
  var video = document.getElementById('myVideo');
  var hls = new Hls();
  hls.loadSource('path_to_encrypted_m3u8_source');
  hls.attachMedia(video);
  hls.on(Hls.Events.MANIFEST_PARSED, function () {
    video.play();
  });
  hls.on(Hls.Events.ERROR, function (event, data) {
    if (data.fatal) {
      switch(data.type) {
        case Hls.ErrorTypes.NETWORK_ERROR:
          // 尝试重连
          break;
        case Hls.ErrorTypes.MEDIA_ERROR:
          break;
        default:
          hls.destroy();
      }
    }
  });
}

代码运行方式

• 确保您的开发环境支持uni-app和Vue.js。
• 将上述代码片段集成到您的项目中，并确保hls.js已正确引入。
• 在iOS设备上测试视频播放效果。

代码预期运行结果

预期结果是视频在iOS设备上播放时，画面尺寸保持稳定，不再出现由小变大的问题，提供平滑的播放体验。

推荐相关链接

• uni-app官方文档
• hls.js官方文档
• iOS视频播放相关讨论
• Vue.js事件处理