uni-app app视频播放闪烁

uni-app app视频播放闪烁

示例代码：

<video  
id="item._id"
loop="true"
src="item.video"
muted="item.isplay"
@play="playIngs(i)"
@waiting="waiting(i)"  
title="item.title"
enable-progress-gesture="false"
page-gesture="false"
controls="isControls"
http-cache="true"
show-loading="false"
show-fullscreen-btn="false"
show-center-play-btn="false"
style="boxStyle"
object-fit="object_fit"
@timeupdate="timeupdate($event,i)"
@fullscreenchange="fullscreenChange"  
poster="item.videoImg"
>
</video>

操作步骤：

  • 视频播放闪烁

预期结果：

  • 正常播放

实际结果：

  • 闪烁

bug描述：

效果

项目信息 描述
产品分类 uniapp/App
PC开发环境 Windows
HBuilderX类型 正式
HBuilderX版本 4.76
手机系统 Android
手机系统版本 Android 16
手机厂商 华为
手机机型 小米13、IPhone16
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app app视频播放闪烁的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

该bug反馈内容不完整：手机OS系统版本标注为"Android 16"（实际Android最高版本为14），且设备机型同时包含Android的小米13和iOS的IPhone16存在平台矛盾；复现步骤过于简略，仅"视频播放闪烁"无法精准复现；缺少视频格式、网络环境等关键信息。代码示例虽完整但未体现上下文，无法直接运行验证。
根据知识库分析，bug可能成立：uni-app在4.81+版本已修复多个video组件问题（如App-Android平台修复video控件显示问题、iOS平台修复静音后无法调大音量问题）。用户使用HBuilderX 4.76（低于修复版本4.81），且未配置横屏支持（需manifest.json添加screenOrientation配置），可能导致视频渲染异常。知识库明确提示"HBuilderX内置浏览器使用video标签暂时存在问题"，建议优先使用外部浏览器测试。
非基础概念问题，但存在平台混淆：用户同时提及Android和iOS设备却指定单一平台，且Android系统版本描述错误。建议升级至HBuilderX 4.83+，检查manifest.json横屏配置，确认视频格式兼容性（推荐H.264编码MP4），并参考video组件文档进行适配测试。若仍异常，需补充具体复现路径及视频样本。 内容为 AI 生成，仅供参考

更多关于uni-app app视频播放闪烁的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关于视频播放闪烁的问题，建议从以下几个方面排查：
检查视频格式是否兼容，推荐使用MP4(H.264编码)格式 查看是否开启了硬件加速，可在video组件添加属性：android-layer-type=“hardware” 参考链接 如果是Android平台，确认是否使用了最新HBuilderX版本（当前正式版4.85），早期版本存在视频播放相关bug
如问题仍未解决，请补充以下信息：

具体运行平台（Android/iOS/小程序等）

HBuilderX版本号

视频文件格式和编码信息

重现步骤和频率

[来源：uniapp.dcloud.net.cn]

内容为 AI 生成，仅供参考

视频播放闪烁通常与视频组件渲染、硬件加速或内存管理有关。以下是几个常见原因及解决方案：

  1. 启用硬件加速
    在 pages.json 中为当前页面配置硬件加速：

    {
  "style": {
    "app-plus": {
      "hardwareAccelerated": true
    }
  }
}

  2. 优化视频加载
    避免同时加载多个视频，可尝试以下调整：

    • 设置 autoplay="false" 减少初始加载压力。
    • 使用 v-if 控制视频组件按需渲染，非当前可见区域视频暂不加载。
    • 检查 src 地址是否稳定（网络或本地路径）。

  3. 调整渲染参数

    • 尝试修改 object-fit 为 "cover" 或 "contain" 测试是否改善。
    • 移除 show-loading="false" 或设为 true，避免加载状态冲突。

  4. 检查内存与性能

    • 在 onHide 或页面销毁时手动销毁视频实例：
      this.$refs.videoId && this.$refs.videoId.destroy()
回到顶部