uniapp的video视频属性打包app后层级过高

问题:在使用uniapp开发APP时,使用video标签显示视频发现H5可以正常展示,但是打包到APP后,它的层级过高,把底部导航都盖住了。

官网说明:uni-app官网

官网给了cover-view组件或plus.nativeObj.view、subNVue三种方案,实行起来有点繁琐,使用我直接使用了现成的插件。

解决方案:video-player 视频播放器 html5视频播放器-解决频层级、覆盖 - DCloud 插件市场

使用方式:

这是一个组件,直接把组件复制到公共的文件夹下,引入就可以直接使用。

javascript 复制代码
<DomVideoPlayer
  ref="domVideoPlayer"
  src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4"
  autoplay
  loop
  controls
  muted
/>

<script>

import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer';
	export default {
		components: {
			DomVideoPlayer
		},
    }
</script>

使用效果:

最后感谢作者大大提供这么好的解决方案!!!

相关推荐
IT观测1 小时前
2026年六家视频音频格式转换软件品牌深度解析:格式转化器选型指南
音视频
大学生小郑1 小时前
如何定义图像质量,如何评价图像质量
图像处理·学习·音视频·视频
南棱笑笑生4 小时前
20260422给万象奥科的开发板HD-RK3576-PI适配瑞芯微原厂的Buildroot时使用mpg123播放mp3音频
前端·javascript·音视频·rockchip
AI服务老曹4 小时前
深度解析:基于异构计算的 AI 视频管理平台架构实践
人工智能·架构·音视频
RE.nior5 小时前
2026 年 4 月 AI 视频生成模型实测:Wan 2.7、PixVerse V6、Sora 2、Seedance 2.0 谁能打
人工智能·aigc·音视频
破阵子443285 小时前
PotPlayer 基于N卡进行超分,视频秒变4K
音视频
Bruce_Liuxiaowei5 小时前
让AI帮你“看懂”文件:批量重命名、会议纪要、视频翻译全攻略
人工智能·ai·音视频·智能体·workbuddy
果粒蹬i5 小时前
把视频内容变成手绘漫画笔记?ClipSketch AI 让小红书创作省事不少
人工智能·笔记·音视频
倔强的石头1065 小时前
在家也能做 AI 导演!本地部署 Wan2.1 视频生成模型全攻略
人工智能·音视频·cpolar
EasyDSS5 小时前
私有化视频会议系统/私有化音视频系统EasyDSS如何构建金融行业视频会议安全技术底座
安全·金融·音视频