uni-app中html video设置不要controls但播放按钮和时长会闪现一下
uni-app中html video设置不要controls但播放按钮和时长会闪现一下
示例代码：
<video :src="url" :controls="false"
loop="true" muted="true" autoplay="true" preload="true" :show-play-btn="false"
object-fit="cover">
</video> 操作步骤：
如上
预期结果：
播放的时候“播放按钮”和“视频时长”不要显示出来，也不要闪现
实际结果：
“播放按钮”和“视频时长”会闪现一下
bug描述：
设置了controls="false"等属性在H5页面显示的时候，“播放按钮”和“视频时长”会闪现一下
<video :src="url" :controls="false"
loop="true" muted="true" autoplay="true" preload="true" :show-play-btn="false"
object-fit="cover">
</video> | 信息类别 | 信息内容 |
|---|---|
| 产品分类 | uniapp/H5 |
| PC开发环境 | Windows |
| 操作系统版本 | win10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本 | 4.0 |
| 浏览器 | Chrome |
| 浏览器版本 | 121.0.6167.140（正式版本）（64 位） |
| 项目创建方式 | HBuilderX |
2 回复
在 uni-app 中使用 HTML 的 <video> 标签时，如果你设置了 controls 属性为 false，但仍然看到播放按钮和时长信息闪现一下，这通常是因为浏览器在加载视频时会默认显示这些控件，直到 JavaScript 代码执行并隐藏它们。
要解决这个问题，可以通过以下几种方式来避免控件闪现：
1. 使用 controlsList 属性
controlsList 属性可以用来指定哪些控件不显示。你可以通过设置 controlsList="nodownload nofullscreen noremoteplayback" 来隐藏下载、全屏和远程播放控件，但播放按钮和时长可能仍然会闪现。
<video controls controlsList="nodownload nofullscreen noremoteplayback" src="your-video-url.mp4"></video>2. 使用 CSS 隐藏控件
你可以通过 CSS 来隐藏视频控件。在视频加载时，通过设置 display: none 或 visibility: hidden 来隐藏控件。
<video id="myVideo" src="your-video-url.mp4"></video>
<style>
#myVideo::-webkit-media-controls {
display: none !important;
}
#myVideo::-webkit-media-controls-enclosure {
display: none !important;
}
</style>3. 使用 autoplay 和 muted 属性
如果你希望视频自动播放并且不需要用户交互，可以设置 autoplay 和 muted 属性。这样视频会立即开始播放，用户不会看到播放按钮。
<video autoplay muted src="your-video-url.mp4"></video>4. 使用 JavaScript 延迟隐藏控件
你可以在视频加载完成后，通过 JavaScript 来隐藏控件。这样可以避免控件闪现的问题。
<video id="myVideo" src="your-video-url.mp4"></video>
<script>
document.getElementById('myVideo').addEventListener('loadedmetadata', function() {
this.controls = false;
});
</script>5. 使用 playsinline 属性
在移动设备上，设置 playsinline 属性可以防止视频在全屏模式下播放，从而减少控件的显示。
<video playsinline src="your-video-url.mp4"></video>6. 使用 uni-video 组件
如果你在 uni-app 中使用的是 uni-video 组件，可以参考官方文档来设置相关属性，避免控件闪现。
<uni-video src="your-video-url.mp4" :controls="false"></uni-video>