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>

使用效果:

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

相关推荐
行业探路者5 小时前
二维码标签是什么?主要有线上生成二维码和文件生成二维码功能吗?
学习·音视频·语音识别·二维码·设备巡检
Swift社区6 小时前
H5 与 ArkTS 通信的完整设计模型
uni-app·harmonyos
小溪彼岸10 小时前
uni-app小白从0开发一款鸿蒙Next应用到上线
uni-app·harmonyos
Android系统攻城狮10 小时前
Android16音频之获取Record状态AudioRecord.getState:用法实例(一百七十七)
音视频·android16·音频进阶
liefyuan11 小时前
【RV1106】rkipc:分析(一)
音视频
一颗小青松11 小时前
uniapp app端使用uniCloud的unipush
uni-app
aqi0012 小时前
FFmpeg开发笔记(九十八)基于FFmpeg的跨平台图形用户界面LosslessCut
android·ffmpeg·kotlin·音视频·直播·流媒体
广州服务器托管13 小时前
比较优秀的视频音频播放器PotPlayer64-v1.7.22764绿色版
运维·windows·计算机网络·电脑·音视频·可信计算技术
cngm11015 小时前
uniapp+springboot后端跨域以及webview中cookie调试
spring boot·后端·uni-app
jbk331116 小时前
批量给视频添加字幕,并实现多样式可选的功能
音视频