uni-app video标签设置视频封面时，视频自动播放会出现闪烁问题

uni-app video标签设置视频封面时，视频自动播放会出现闪烁问题

开发环境 版本号 项目创建方式
Windows Windows 10 HBuilderX 
# 操作步骤：
video标签设置视频封面，当视频自动把播放时，视频会闪一下

# 预期结果：
video标签设置视频封面，当视频自动把播放时，自然播放，屏幕不闪，丝滑一点

# 实际结果：
video标签设置视频封面，当视频自动把播放时，视频会闪一下，然后接着播放

# bug描述：
video标签设置视频封面，当视频自动把播放时，视频会闪一下

# App下载地址或H5网址：
[https://service.dcloud.net.cn/build/download/bc040ce0-6861-11eb-8db2-6191344c9a06](https://service.dcloud.net.cn/build/download/bc040ce0-6861-11eb-8db2-6191344c9a06)

更多关于uni-app video标签设置视频封面时，视频自动播放会出现闪烁问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

同样遇到了这个问题

更多关于uni-app video标签设置视频封面时，视频自动播放会出现闪烁问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的视频封面切换问题，主要是由于封面图和视频首帧切换时产生的视觉闪烁。以下是解决方案：

  1. 使用poster属性设置封面图：
<video 
  :src="videoUrl" 
  :poster="coverUrl" 
  autoplay
></video>
  1. 如果仍有闪烁，可以尝试以下优化方案：
  • 确保封面图与视频首帧内容一致
  • 使用CSS过渡效果平滑切换：
video {
  transition: opacity 0.3s;
}
video[poster] {
  opacity: 1;
}
video:not([poster]) {
  opacity: 1;
}
  1. 对于H5端，可以尝试先加载视频但不自动播放，通过JS控制播放时机：
mounted() {
  this.$nextTick(() => {
    setTimeout(() => {
      this.$refs.video.play()
    }, 300)
  })
}
回到顶部