uni-app video组件播放m3u8视频报错

在 uni-app 中使用 video 组件播放 .m3u8 视频时，可能会遇到一些报错或无法播放的问题。以下是一些常见的原因和解决方法：

1. 检查视频源是否有效

• 确保 .m3u8 文件链接是有效的，并且可以在其他播放器（如 VLC 或浏览器）中正常播放。
• 如果视频源是跨域的，确保服务器配置了正确的 CORS 头。

2. 检查 video 组件的属性

• 确保 video 组件的 src 属性正确指向 .m3u8 文件。
• 如果需要支持 .m3u8 格式，可以尝试设置 type 属性为 "hls"：

  <video :src="videoUrl" type="hls"></video>
  

• 如果 type 属性设置为 "hls" 仍然无法播放，可能是平台不支持。

3. 平台兼容性问题

• H5 端：H5 端默认不支持 .m3u8 格式，需要引入第三方库（如 hls.js）来实现播放。

  • 安装 hls.js：

    npm install hls.js
    

  • 在页面中使用：

    import Hls from 'hls.js';
    
    export default {
      data() {
        return {
          videoUrl: 'https://example.com/video.m3u8',
        };
      },
      mounted() {
        const video = this.$refs.video;
        if (Hls.isSupported()) {
          const hls = new Hls();
          hls.loadSource(this.videoUrl);
          hls.attachMedia(video);
          hls.on(Hls.Events.MANIFEST_PARSED, () => {
            video.play();
          });
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          video.src = this.videoUrl;
          video.addEventListener('loadedmetadata', () => {
            video.play();
          });
        }
      },
    };
    

    <video ref="video" controls></video>
    

• App 端：App 端默认支持 .m3u8 格式，但需要确保 video 组件的 src 属性正确，并且视频源是有效的。

• 小程序端：小程序端可能不支持 .m3u8 格式，需要将视频转码为支持的格式（如 .mp4）。

4. 调试工具

• 使用浏览器的开发者工具（F12）查看网络请求，检查 .m3u8 文件和分片文件是否正常加载。
• 查看控制台是否有错误信息，例如跨域问题或格式不支持。

5. 其他解决方案

• 如果以上方法无效，可以尝试将 .m3u8 文件转换为其他格式（如 .mp4）进行播放。
• 使用第三方播放器插件（如 video.js 或 dplayer）来支持 .m3u8 格式。

示例代码

以下是一个完整的示例，支持 H5 端播放 .m3u8 视频：

<template>
  <view>
    <video ref="video" controls></video>
  </view>
</template>

<script>
import Hls from 'hls.js';

export default {
  data() {
    return {
      videoUrl: 'https://example.com/video.m3u8',
    };
  },
  mounted() {
    const video = this.$refs.video;
    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(this.videoUrl);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
      });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = this.videoUrl;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      });
    }
  },
};
</script>