uniapp中video展示.m3u8格式视频不显示是什么原因？

在uniapp中使用video组件播放.m3u8格式视频时无法显示，控制台也没有报错信息。请问可能是什么原因导致的？需要检查哪些配置或添加什么特殊设置？视频链接在其他平台测试是正常的。

2 回复

可能原因：

  1. 视频源地址无效或跨域问题
  2. 浏览器兼容性（部分安卓机需开启硬件加速）
  3. 未添加playsinline属性
  4. 网络问题或服务器不支持m3u8

建议：检查视频源，添加playsinline，测试不同设备。


在 UniApp 中，video 组件无法正常显示 .m3u8 格式视频的常见原因及解决方案如下：

  1. 平台兼容性问题：

    • H5 端：部分浏览器不支持直接播放 .m3u8 流媒体格式。建议使用第三方播放器库（如 hls.js）进行兼容处理。
    • 小程序端：微信小程序等平台可能对 .m3u8 支持有限，需检查平台文档确认格式支持情况。

  2. 视频源问题：

    • 确保 .m3u8 文件及关联的 .ts 分片可通过网络正常访问（无跨域限制或链接失效）。
    • 测试其他播放工具（如 VLC 播放器）验证视频源是否有效。

  3. 代码配置问题：

    • 检查 src 路径是否正确，并添加 type 属性为 application/x-mpegURL。
    • 示例代码：
      <video :src="videoUrl" controls :type="videoType"></video>

      export default {
  data() {
    return {
      videoUrl: 'https://example.com/your-video.m3u8',
      videoType: 'application/x-mpegURL'
    };
  }
};

  4. 跨域限制（H5 端）：

    • 若视频服务器未配置 CORS 跨域头，需联系服务端添加 Access-Control-Allow-Origin 等响应头。

  5. 使用替代方案：

    • 若原生 video 组件仍无法播放，可尝试使用插件（如 uni-media）或转码为通用格式（如 MP4）。

优先检查视频源和平台兼容性，多数问题源于此。

回到顶部