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>

使用效果:

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

相关推荐
cxr82812 小时前
第14章 创意音乐与视频的多模态智能体创作
人工智能·音视频·智能体·hermes
千逐6813 小时前
Uniapp 鸿蒙实战之 AtomGit APP - 仓库详情与文件树浏览
服务器·microsoft·uni-app
万物得其道者成14 小时前
uni-app App 热更新实现指南:从接口检查到下载安装重启(附带AI提示词)
uni-app
anyup15 小时前
uView Pro 正式支持 MCP 协议!让 AI 秒懂你的组件库
前端·uni-app·ai编程
梦帮科技15 小时前
基于EVM架构的Web3音频确权与RNS Token智能合约设计深度解析
人工智能·python·架构·web3·区块链·音视频·智能合约
最爱老式锅包肉17 小时前
《HarmonyOS技术精讲-Core Speech Kit(基础语音服务)》第1篇:音频管理基础与语音服务入门
华为·音视频·harmonyos
千逐6817 小时前
Uniapp 鸿蒙实战之 AtomGit APP - 首页设计与仓库列表实现
华为·uni-app·harmonyos
“码”力全开1 天前
AI视频分析飞书告警常见问题和排查清单
人工智能·音视频·飞书
西安老张(AIGC&ComfyUI)1 天前
第021章:ComfyUI文生音频Qwen3-TTS模型数字人音色设计(二)
aigc·音视频·comfyui
关于作业的二三事1 天前
图像和视频处理的核心概念(在图像上画矩形)
音视频