uni-app 视频播放进度条不能左右拖动（app和H5都不行）

uni-app 视频播放进度条不能左右拖动（app和H5都不行）

示例代码：

<video src="http://192.168.3.7:8054/hs-boot/sys/common/static/course/666_1640242888214ppppp.mp4" class="video" @progress="loadedmetadata2"></video>

操作步骤：

  • video 播放进度条不能拖动

预期结果：

  • video 播放进度条能拖动

实际结果：

  • video 播放进度条不能拖动

bug描述：

  • video 标签 本地播放视频不能拖动进度条。

附件：

image image

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 windows 10
HBuilderX 正式
HBuilderX版本 3.3.2
手机系统 Android
手机系统版本 Android 12
手机厂商 华为
手机机型 DVC-AN20
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app 视频播放进度条不能左右拖动（app和H5都不行）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

此设备在旧版是否正常？ 此版本使用其他设备是否正常？ 用示例代码hello uni-app能出现你的问题吗？

更多关于uni-app 视频播放进度条不能左右拖动（app和H5都不行）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于视频文件本身不支持流式播放（seekable）导致的。以下是几个关键原因和解决方案：

1. 视频编码问题

  • MP4文件需要包含moov atom元数据信息才能支持拖动
  • 使用工具重新编码视频：ffmpeg -i input.mp4 -movflags faststart output.mp4

2. 服务器配置问题

  • 确保服务器支持HTTP Range请求（206状态码）
  • Nginx配置示例：
location ~ \.mp4$ {
    add_header Accept-Ranges bytes;
    mp4;
    mp4_buffer_size 1m;
    mp4_max_buffer_size 5m;
}

3. uni-app代码优化

  • 使用官方video组件属性：
<video 
    :src="videoUrl" 
    controls
    :enable-progress-gesture="true"
    :show-progress="true"
    @loadedmetadata="onLoadedMetadata">
</video>

4. 本地文件处理

  • 如果是本地文件，确保路径正确：
// 相对路径
src: '/static/video/test.mp4'

// 绝对路径（App端）
src: '_www/static/video/test.mp4'
回到顶部