H5端video组件视频开始播放后不显示暂停与播放按钮但点击左下角依然可以暂停与播放

H5端video组件视频开始播放后不显示暂停与播放按钮但点击左下角依然可以暂停与播放

示例代码：

<video src="https://img.wlcp.yiesun.com/local/files/c01bbdfd-c692-4fa9-984f-6ac1f7948acc.MP4" controls />

操作步骤：

  • hbuilderX中新建vue3项目，将示例代码复制到页面中，运行到浏览器

预期结果：

  • 视频显示完整播放控件

实际结果：

  • PC端chrome，edge，与数个型号的安卓手机，均无法显示完整控件，视频开始播放后左下角无图标，但点击该位置依然可以控制视频播放与暂停。
  • 安卓端浏览器全屏后左下角依然不显示播放暂停按钮，但点击左下角空白同样可以暂停播放视频。
  • PC端浏览器中，将鼠标指针放到视频左下角空白处会变成手型指针。

bug描述：

edge浏览器

安卓手机via浏览器


3 回复

该bug反馈内容基本完整：有明确标题、详细描述（含截图）、简洁代码示例、清晰复现步骤、合理预期与实际结果对比，以及详细的分类信息（Windows 25H2/HBuilderX 4.87）。但存在不足：未说明是否Vue3项目、缺少manifest.json配置细节、未提及是否有自定义CSS影响，且复现步骤中未明确测试方式（真机调试/浏览器运行）。
经核查知识库，该问题不成立。H5端video组件编译为标准HTML5 video标签，其controls行为由浏览器决定。知识库明确指出：“H5平台：支持的视频格式视浏览器而定"且"HBuilderX内置浏览器，使用video标签暂时存在问题，请先使用其他外部浏览器”。用户反馈的Chrome/Edge/安卓浏览器控制栏显示异常实为浏览器原生行为差异——部分现代浏览器为简洁UI会隐藏默认控件（仅保留点击区域），但交互功能正常，符合HTML5规范。知识库video组件文档也说明视图组件本身不负责渲染UI元素。
非uni-app缺陷，属前端通用问题。建议：1) 使用第三方库如video.js统一控制栏样式；2) 检查是否有全局CSS覆盖video控件；3) 参考H5视频规范确认浏览器兼容性。无需更新HBuilderX，当前版本行为符合预期。 内容为 AI 生成，仅供参考


哦，无事了，是因为父元素设置了font-size: 0;，影响到了video

这是H5端video组件在部分浏览器环境下的原生控件渲染问题。当使用controls属性时，浏览器会使用其默认的视频控制栏，但不同浏览器对控制栏样式的实现存在差异。

在uni-app中，H5端的video组件本质上是调用了浏览器的原生<video>标签。您遇到的情况可能是以下原因导致的：

  1. 浏览器兼容性问题：某些浏览器（特别是移动端浏览器）可能会隐藏部分控制按钮，或采用精简的控制栏设计。

  2. CSS样式冲突：页面中的CSS可能影响了原生视频控件的显示。

解决方案：

  1. 使用自定义播放器控件： 隐藏原生控件，使用JavaScript控制视频播放，并自定义UI：

    <video 
  ref="videoRef" 
  :src="videoSrc" 
  :controls="false"
  @play="onPlay"
  @pause="onPause"
/>
<div class="custom-controls">
  <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
  <!-- 其他自定义控件 -->
</div>

    const videoRef = ref(null)
const isPlaying = ref(false)

const togglePlay = () => {
  if (videoRef.value) {
    if (isPlaying.value) {
      videoRef.value.pause()
    } else {
      videoRef.value.play()
    }
  }
}

const onPlay = () => { isPlaying.value = true }
const onPause = () => { isPlaying.value = false }

  2. 检查CSS影响： 确保没有全局CSS影响了video元素的样式：

    video {
  /* 重置可能影响控件的样式 */
  object-fit: contain;
}
回到顶部