引入字体导致 uni-app video 在 h5 中不显示中间播放按钮

引入字体导致 uni-app video 在 h5 中不显示中间播放按钮

示例代码：

@font-face {
font-family: 'FZDHTJW';
src: url('/static/font/FZDHTJW.TTF');
}
@font-face {
font-family: 'FZHTJW';
src: url('/static/font/FZHTJW.TTF');
}
  • { font-family: ‘FZHTJW’, sans-serif !important; }

操作步骤：

  • 创建一个新项目，在 app.vue引入字体

预期结果：

  • 不影响 video 标签中间显示播放按钮

实际结果：

  • 在 h5 中不显示了

bug描述：

升级 4.65 之后，原有的视频 video 标签在 h5 中的播放按钮不显示了，安卓 iOS 正常，之前版本正常。 经过排查是因为引入字体库导致 font-family: ‘uni-video-icon’; 引用无效。

.uni-video-icon {  
    font-family: 'uni-video-icon'; // 被划线  
    text-align: center;  
}
信息 描述
产品分类 uniapp/H5
PC开发环境操作系统 Mac
版本号 15.3.2 (24D81)
HBuilderX类型 正式
HBuilderX版本号 4.65
浏览器平台 Chrome
浏览器版本 136.0.7103.93
项目创建方式 HBuilderX

更多关于引入字体导致 uni-app video 在 h5 中不显示中间播放按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

感谢反馈，问题已复现，已加分
临时解决方案
.uni-video-icon {
font-family: ‘uni-video-icon’ !important; // 被划线
text-align: center;
}

更多关于引入字体导致 uni-app video 在 h5 中不显示中间播放按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html


4.71.2025061206-alpha 已修复，可升级到此版本

这个问题是由于在uni-app 4.65版本中，H5平台下引入自定义字体导致uni-video-icon字体失效引起的。以下是解决方案：

  1. 原因分析：
  • 自定义字体的全局设置覆盖了uni-video-icon的字体设置
  • 这是4.65版本特有的H5平台兼容性问题
  1. 解决方法： 在App.vue中为video组件单独重置字体：
/* 修复H5视频播放按钮不显示问题 */
.uni-video-icon {
    font-family: 'uni-video-icon' !important;
}
  1. 替代方案： 如果上述方法无效，可以尝试使用自定义播放按钮：
<video :controls="false" [@click](/user/click)="handlePlay">
    <cover-view class="custom-play-btn" v-if="!isPlaying"></cover-view>
</video>
回到顶部