uniappx video组件h5无法播放m3u8格式怎么办

我在uniappx中使用video组件播放m3u8格式视频时，在H5平台上无法正常播放。视频在其他平台（如安卓/iOS）可以正常播放，但H5环境下会出现加载失败或黑屏的情况。已经确认m3u8文件和视频源是正常的。请问这是什么原因导致的？是否有解决方案或兼容性处理办法？

2 回复

检查m3u8链接是否跨域，建议使用hls.js库处理。在uniappx中通过renderjs引入hls.js解码播放。


在UniAppX中，H5平台无法直接播放M3U8格式视频，因为H5默认使用浏览器原生<video>标签，而M3U8需要依赖HLS（HTTP Live Streaming）协议支持。以下是解决方案：

1. 使用HLS.js库（推荐）

  • 引入HLS.js库，通过JavaScript手动处理M3U8流。
  • 步骤：
    1. 在项目中安装HLS.js：
      npm install hls.js --save
    2. 在页面中引入并使用：
      <template>
  <view>
    <video ref="videoRef" controls></video>
  </view>
</template>

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

export default {
  mounted() {
    const video = this.$refs.videoRef;
    const videoSrc = 'https://example.com/your-video.m3u8'; // 替换为你的M3U8地址

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(videoSrc);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play();
      });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      //  Safari等原生支持HLS的浏览器
      video.src = videoSrc;
      video.addEventListener('loadedmetadata', () => {
        video.play();
      });
    }
  }
};
</script>

2. 条件编译处理多平台

  • 使用UniApp的条件编译，仅H5平台使用HLS.js，其他平台用默认video组件。
  • 示例：
    <template>
  <view>
    <!-- 非H5平台 -->
    <!-- #ifndef H5 -->
    <video :src="videoSrc" controls></video>
    <!-- #endif -->

    <!-- H5平台 -->
    <!-- #ifdef H5 -->
    <video ref="videoRef" controls></video>
    <!-- #endif -->
  </view>
</template>

<script>
// #ifdef H5
import Hls from 'hls.js';
// #endif

export default {
  data() {
    return {
      videoSrc: 'https://example.com/your-video.m3u8'
    };
  },
  // #ifdef H5
  mounted() {
    // H5平台的HLS.js代码（同上）
  }
  // #endif
};
</script>

注意事项：

  • 兼容性：HLS.js兼容主流浏览器，但需注意部分旧版本可能不支持。
  • 性能：HLS.js通过JavaScript解析视频流，可能增加内存占用，建议测试目标设备性能。
  • 跨域问题：确保M3U8文件和TS片段允许跨域访问（CORS配置）。

通过以上方法，即可在UniAppX的H5平台实现M3U8视频播放。

回到顶部