uni-app video 结束页推荐无法关闭,因各端原生播放器默认行为所致;需通过禁用controls、自绘cover-view、结束时pause+seek(0)、销毁video实例等手段分端拦截。

uni-app video 组件结束页推荐视频无法关闭
uni-app 的 <video> 组件本身不渲染任何“推荐视频”,你看到的结束页推荐(如黑屏后弹出的相似视频、标题栏、播放按钮浮层等)全部来自各端原生控件的默认行为——iOS Safari、Android 系统 WebView、微信小程序内置播放器都会在 ended 后自动展示推荐内容,且 uni-app 无 API 可禁用。
Android App 端:靠 nativeVideo + 隐藏 controls 实现“干净结束”
App 端唯一可控路径是使用 nvue 页面 + 原生 <video>,并严格限制 UI 层级:
- 设置
controls="false",避免系统控件自带的“重播/推荐”按钮 - 禁用
show-center-play-btn和show-play-btn(uni-app video 属性),否则 iOS/Android 会在结束时自动显示中心播放按钮并带推荐逻辑 - 监听
@ended后立即调用this.context.stop()或切换为静音空src,防止原生控件进入“推荐态” - 不要依赖
poster图片做兜底——某些 Android 厂商定制系统会在 poster 上叠加推荐入口,改用透明cover-view遮盖整个视频区域更可靠
微信小程序:enable-danmu 和 show-progress 会意外触发推荐浮层
小程序端最隐蔽的坑是:哪怕你没写任何推荐逻辑,只要启用了某些看似无关的属性,就会激活平台默认的“结束页卡片”:
-
enable-danmu="true"会强制启用完整播放器壳,附带结束推荐 -
show-progress="true"+show-fullscreen-btn="true"组合,在 iOS 微信中大概率导致结束时弹出“猜你想看”横幅 - 解决方案:设
controls="false",所有控制逻辑用cover-view自绘;结束时用context.pause()+context.seek(0)停在首帧,而非留空或销毁组件 - 注意:
cover-view必须放在<video>同级且 z-index 高于它,否则在部分安卓微信里仍会被原生浮层穿透
H5 端:靠移除 video 标签 + CSS 隐藏兜底
H5 最不可靠,因为完全取决于浏览器实现。Chrome 和 Safari 对 ended 后的行为没有统一规范:
- 不要复用同一个
<video>标签做列表连播——反复src切换会积累原生状态,更容易触发推荐 - 结束时用
v-if="!isPlaying"销毁 video 实例,替换为纯<img :src="poster">,比留着黑屏 video 更干净 - 若必须保留 video 标签,加内联样式
style="object-fit: cover; background: #000;"并确保poster与视频宽高比一致,可减少 Safari 自动填充推荐卡片的概率 - 禁止设置
webkit-playsinline外的任何 WebKit 私有属性,某些旧版 Safari 会因识别到“可内联”而增强结束页交互
真正难处理的不是代码逻辑,而是各端对“播放结束”这个状态的解释权不在你手上——iOS 把 ended 当作用户旅程终点,微信把它当作广告位入口,Android 厂商则各自加料。能做的只有切断它们触发推荐的条件链,而不是期待某个属性一键关闭。


















