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 小时前
2026年免费AI视频生成工具功能深度解析:有无水印、中文语音及商业用途考量
大数据·人工智能·ai作画·aigc·音视频·ai写作
国产化创客3 小时前
ESP32音频/语音技术(4)AudioTools 库及转发播放程序分析
物联网·音视频·esp32
martindelophy3 小时前
浏览器视频导出太慢怎么优化?一次 WebCodecs 实践:8 分钟视频耗时降低 31%
性能优化·音视频·优化
Dovis(誓平步青云)4 小时前
常用命令藏得太深?怎么做一个快捷命令坞
运维·前端·自动化·音视频·prometheus
开开心心就好9 小时前
把手机变成电脑麦克风,WiFi连接就能用
智能手机·ffmpeg·计算机外设·电脑·word·音视频
Dovis(誓平步青云)10 小时前
现场问题先关闭还是先验收,建筑任务怎样处理依赖
前端·javascript·数据库·mysql·音视频
原子延迟10 小时前
视频还没出画面怎么判断是不是坏了
图像处理·人工智能·计算机视觉·音视频
小猴子爱上树11 小时前
跨马翻译:批量图片翻译+视频字幕+智能抠图,跨境电商翻译工具
python·音视频
Evanfu021612 小时前
整部短剧文件怎么管理:目录、命名与版本规则
aigc·音视频·视频·机器翻译·自动翻译
weixin_4216075512 小时前
带货视频怎么翻译成外语?翻译配音工具与成片服务商对比
音视频·视频本地化·vividdub·视频翻译配音工具·多语种视频翻译·电商视频配音·中文口播转英文