uniapp video在微信小程序播放 m3u8 格式视频无法实现拖动进度条怎么办？

在uniapp中开发微信小程序时，使用video组件播放m3u8格式视频无法拖动进度条，该如何解决？尝试过设置enable-progress-gesture为true但无效，是否需要对视频源特殊处理或使用其他方案实现？

2 回复

微信小程序原生不支持m3u8格式的进度条拖动。建议：

  1. 将视频转码为mp4格式
  2. 使用第三方播放器插件
  3. 后端对m3u8做切片处理

这是微信小程序的限制，不是uniapp的问题。


在微信小程序中，uni-app 的 <video> 组件播放 M3U8 格式视频时，进度条无法拖动通常是因为视频流缺少关键帧（I帧） 信息。M3U8 作为 HLS 流媒体格式，其拖动功能依赖关键帧的间隔设置。以下是解决方案：

1. 检查视频编码配置

  • 关键帧间隔：确保视频编码时，关键帧（GOP）间隔不宜过大（建议 2-10 秒）。过大的间隔会导致拖动时定位不准确。
  • 示例 FFmpeg 命令（转码时设置关键帧间隔）：
    ffmpeg -i input.mp4 -c:v libx264 -g 50 -keyint_min 50 -sc_threshold 0 -f hls -hls_time 10 output.m3u8
    参数说明：
    • -g 50：设置 GOP 大小为 50 帧（假设帧率为 25fps，则关键帧间隔约 2 秒）。
    • -hls_time 10：每个 TS 分片时长为 10 秒。

2. 使用 HLS.js 兼容方案（需条件）

微信小程序默认对 M3U8 支持有限，可尝试通过 web-view 组件嵌入 H5 页面，使用 HLS.js 库播放：

<!-- 在 uni-app 的 web-view 中嵌入 -->
<web-view src="https://your-domain.com/hls-player.html"></web-view>

H5 页面示例（需部署到服务器）：

<video id="video" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js[@latest](/user/latest)"></script>
<script>
  if (Hls.isSupported()) {
    const video = document.getElementById('video');
    const hls = new Hls();
    hls.loadSource('https://your-domain.com/video.m3u8');
    hls.attachMedia(video);
  }
</script>

注意：此方案需配置业务域名，且受小程序网络限制。

3. 转码为 MP4 格式

若上述方法无效，建议将视频转为 MP4（支持范围更广）：

ffmpeg -i input.m3u8 -c copy output.mp4

在 uni-app 中直接使用：

<video src="https://your-domain.com/video.mp4" controls></video>

4. 服务端优化

  • 使用 CDN 加速 M3U8 分片加载。
  • 检查服务端 HLS 配置，确保 #EXT-X-PLAYLIST-TYPE:VOD（点播）标签正确，以支持拖动。

总结

优先检查视频编码关键帧间隔，或转为 MP4 格式。若需坚持 M3U8，可尝试 web-view + HLS.js 方案（注意兼容性和性能）。

回到顶部