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>

使用效果:

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

相关推荐
飞Link2 小时前
【网络与 AI 工程的交叉】多模态模型的数据传输特点:视频、音频、文本混合通道
网络·人工智能·音视频
音视频牛哥2 小时前
从“能播”到“能控”:深入解读 SmartMediakit 与 OTT 播放器的架构裂变
音视频·ott·低延迟rtsp播放器·smartmediakit·低延迟rtmp播放器·低延迟音视频技术方案·具身智能低延迟rtsp方案
2501_916007475 小时前
TCP 抓包分析实战,从三次握手到自定义协议解析的完整方法
网络协议·tcp/ip·ios·小程序·uni-app·php·iphone
Likeadust9 小时前
视频直播点播平台EasyDSS如何重塑媒体行业的内容分发与交互体验
音视频·媒体
赫尔·普莱蒂科萨·帕塔13 小时前
【翻译】从生成的人体视频到物理可行的机器人轨迹
机器人·音视频
2501_9151063213 小时前
H5 混合应用加密实践,从明文资源到安全 IPA 的多层防护体系
android·安全·ios·小程序·uni-app·iphone·webview
EasyCVR14 小时前
智慧油田视频融合平台EasyCVR重塑油田油井智能监管新体系
音视频
小尧嵌入式14 小时前
音视频入门基础知识
开发语言·c++·qt·算法·音视频
iOS阿玮14 小时前
苹果开发者后台叕挂了,P0级别的报错!
uni-app·app·apple
浮桥14 小时前
uniapp开发公众号,实现回到顶部功能
uni-app