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 分钟前
1.3.1 Linux音频框架alsa详细介绍
linux·音视频
科技小E6 分钟前
国标GB28181视频平台EasyCVR安防系统部署知识:如何解决异地监控集中管理和组网问题
大数据·网络·人工智能·音视频
Mapmost2 小时前
【数据融合实战手册·应用篇】“数字孪生+视频融合”让智慧城市拥有空间感知
信息可视化·音视频·无人机·智慧城市
Oliverro3 小时前
EasyRTC嵌入式音视频通话SDK驱动智能硬件音视频应用新发展
人工智能·音视频
天夏已微凉7 小时前
1.2 Linux音频系统发展历程与关键技术演进
linux·c语言·驱动开发·音视频
大力水手~8 小时前
微信小程序上传视频,解决ios上传完video组件无法播放
ios·微信小程序·音视频
小离a_a9 小时前
uniapp tabBar 中设置“custom“: true 在H5和app中无效解决办法
前端·uni-app
travel_wsy10 小时前
webrtc 视频直播
前端·vue.js·音视频·webrtc
DisonTangor10 小时前
LLaMA-Omni 2:基于 LLM 的自回归流语音合成实时口语聊天机器人
人工智能·开源·aigc·音视频·llama
urhero11 小时前
Python+ffmpeg 实现给视频添加字幕
ffmpeg·音视频·python编程·视频编辑·实用视频工具·添加字幕