uni-app APP上 video标签播放特定m3u8视频时出现seek跳进度现象

uni-app APP上 video标签播放特定m3u8视频时出现seek跳进度现象

开发环境 版本号 项目创建方式
Windows 21H1 HBuilderX 
### 示例代码：


<video src="https://vod.bakclass.com/58198210a0c54d939707a3eb9b82e0ba/8a2d895f511998d8ce70abd977fa45c7-ld.m3u8"></video>

操作步骤：

  • 直接使用视频标签

预期结果：

  • 不跳进度正常播放

实际结果：

  • 跳进度问题很严重

bug描述：

https://vod.bakclass.com/58198210a0c54d939707a3eb9b82e0ba/8a2d895f511998d8ce70abd977fa45c7-ld.m3u8
视频地址
任意video标签使用该src就会出现问题
问题包含：
1. 用户拖动进度会直接在整10开始，例如用户拖到至1分01秒 视频会自动跳到1分10秒开始播放
2. 用户无法将视频进度拖动至0:00
3. 视频播放完毕后无法跳回0:00（应该都是seek的问题）

更多关于uni-app APP上 video标签播放特定m3u8视频时出现seek跳进度现象的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

这个问题解决了吗，我也遇到这个问题了。

更多关于uni-app APP上 video标签播放特定m3u8视频时出现seek跳进度现象的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也遇到这个问题

在使用 uni-app 开发移动应用时，如果在 video 标签中播放特定的 .m3u8 视频文件时出现 seek 跳进度现象（即用户拖动进度条时，视频跳转到不正确的播放位置），这通常与视频的编码格式、分片结构或播放器的兼容性有关。以下是一些可能的原因和解决方案：

可能的原因

  1. 视频分片问题:

    • .m3u8 文件是基于 HTTP Live Streaming (HLS) 的视频流格式，如果视频分片（ts 文件）的时间戳不正确或不连续，会导致 seek 跳转异常。
    • 视频的分片可能过大或过小，导致播放器无法准确定位。

  2. 编码格式问题:

    • 视频的编码格式（如帧率、关键帧间隔等）不符合 HLS 的标准，导致播放器无法正确解析。

  3. 播放器兼容性问题:

    • uni-app 默认使用的 video 标签是基于原生播放器的，不同平台（iOS/Android）的播放器对 HLS 的支持可能存在差异。

  4. 网络问题:

    • 如果网络不稳定，播放器可能无法及时加载正确的分片，导致 seek 跳转失败。

解决方案

  1. 检查视频文件:

    • 使用工具（如 ffmpeg）检查 .m3u8 文件和对应的 .ts 文件是否正常。
    • 确保视频的关键帧间隔合理（建议每 2-3 秒一个关键帧）。
    • 重新生成 .m3u8 文件，确保分片时间和关键帧对齐。
    ffmpeg -i input.mp4 -c:v libx264 -flags +cgop -g 30 -hls_time 10 -hls_list_size 0 output.m3u8

  2. 调整分片大小:

    • 在生成 .m3u8 文件时，调整 -hls_time 参数，控制每个分片的时长（建议 5-10 秒）。
    • 确保分片大小适中，避免过大或过小。

  3. 使用第三方播放器:

    • uni-app 默认的 video 标签可能对某些 HLS 视频支持不完善。可以尝试集成第三方播放器，如 video.js 或 hls.js。

    • 安装 hls.js 并手动初始化播放器：

      <video id="myVideo" controls></video>

      import Hls from 'hls.js';

export default {
  mounted() {
    const video = document.getElementById('myVideo');
    const hls = new Hls();
    hls.loadSource('your_video_url.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play();
    });
  }
};
回到顶部