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>

使用效果:

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

相关推荐
李慕婉学姐1 小时前
【开题答辩过程】以《基于uni-app框架的助学管理系统的设计与实现》为例,不知道这个选题怎么做的,不知道这个选题怎么开题答辩的可以进来看看
微信小程序·uni-app
程序猿追1 小时前
在昇腾NPU上实战部署LongCat-Video:从环境配置到长视频生成的完整指南
python·大模型·华为云·音视频
Yutengii1 小时前
小红书的视频怎么下载到本地,实测6款下载工具
音视频
非凡ghost1 小时前
Topaz Video(人工智能视频增强软件)
人工智能·windows·学习·音视频·软件需求
爱吃的强哥1 小时前
uni-app 开发微信小程序注意点
微信小程序·小程序·uni-app
zbguolei1 小时前
Windows平台下SRS实时视频服务器的搭建
服务器·windows·音视频
骄傲的心别枯萎1 小时前
RV1126 NO.58:ROCKX+RV1126人脸识别推流项目之读取人脸数据库并保存到map
linux·数据库·计算机视觉·音视频·rv1126
萌虎不虎11 小时前
【在鸿蒙系统中实现录制视频预览功能】
华为·音视频·harmonyos
GISer_Jing16 小时前
AI在前端开发&营销领域应用
前端·aigc·音视频
2501_9159184119 小时前
TCP 抓包分析在复杂网络问题中的作用,从连接和数据流层面理解系统异常行为
网络·网络协议·tcp/ip·ios·小程序·uni-app·iphone