uniapp的video视频属性打包app后层级过高

问题:在使用uniapp开发APP时,使用video标签显示视频发现H5可以正常展示,但是打包到APP后,它的层级过高,把底部导航都盖住了。

官网说明:uni-app官网

官网给了cover-view组件或plus.nativeObj.view、subNVue三种方案,实行起来有点繁琐,使用我直接使用了现成的插件。

解决方案:video-player 视频播放器 html5视频播放器-解决频层级、覆盖 - DCloud 插件市场

使用方式:

这是一个组件,直接把组件复制到公共的文件夹下,引入就可以直接使用。

<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>

 使用效果:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/907224.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

浅谈UI自动化

⭐️前言⭐️ 本篇文章围绕UI自动化来展开&#xff0c;主要内容包括什么是UI自动化&#xff0c;常用的UI自动化框架&#xff0c;UI自动化原理等。 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f349;博主将持续更新学习记录收获&#xff0c;友友们有任何问题…

Vue3+Data-V实现可视化大屏页面布局

目录 一、前言 二、环境准备 1.Vue3安装npm create vuelatest 2.Data-V配置 项目Data-v安装 main.js中注册Data-v到全局 ​编辑可使用按需引入 3.测试 三、导航栏路由跳转配置 1.子组件mainNav组件准备 2.父组件准备导航栏参数传递 3.子组件接收父组件参数 4.导航…

Python 使用 LSTM 进行情感分析:处理文本序列数据的指南

使用 LSTM 进行情感分析&#xff1a;处理文本序列数据的指南 长短期记忆网络&#xff08;LSTM&#xff09;是一种适合处理序列数据的深度学习模型&#xff0c;广泛应用于情感分析、语音识别、文本生成等领域。它通过在训练过程中“记住”过去的数据特征来理解和预测序列数据的…

树莓派5实时时钟(RTC)

树莓派5板载一个实时时钟模块。它可以通过 USB-C 电源插口右侧板上的 J5(BAT) 插口进行电池供电。如果没有互联网连接来通过 NTP 获取时间&#xff0c;RTC 可能会很有用。 可以设置唤醒警报&#xff0c;将树莓派5切换到非常低功耗的状态&#xff08;大约3mA&#xff09;。当到达…

保姆级教程!!教你通过【Pycharm远程】连接服务器运行项目代码

小罗碎碎念 这篇文章主要解决一个问题——我有服务器&#xff0c;但是不知道怎么拿来写代码&#xff0c;跑深度学习项目。确实&#xff0c;玩深度学习的成本比较高&#xff0c;无论是前期的学习成本&#xff0c;还是你需要具备的硬件成本&#xff0c;都是拦路虎。小罗没有办法…

Chrome与夸克的安全性对比

在当今数字化时代&#xff0c;浏览器的安全性对于用户来说至关重要。Chrome和夸克作为两款流行的浏览器&#xff0c;各有其特点和优势。本文将对这两款浏览器的安全性进行详细对比&#xff0c;帮助用户更好地了解它们之间的差异。&#xff08;本文由https://www.chromegw.com/的…

ZFC in LEAN 之 前集(Pre-set)

前集&#xff08;Pre-set&#xff09;的概念是相对于集合&#xff08;Set&#xff09;&#xff0c;由数学家 Bishop 提出的。Bishop 认为定义一个集合需要三个步骤&#xff1a; 1. 定义该集合的元素是如何构建的&#xff08;Construction&#xff09;。 2. 定义集合中的两元素的…

libaom 源码分析:AV1帧内预测 CfL 模式

CfL预测模式原理 从亮度到色度CfL 是一种色度帧内预测模式&#xff0c;通过建立共位重建亮度采样的线性函数来模拟色度采样&#xff1b;对于不同的色度采样格式&#xff08;例如4:2:0和4:2:2&#xff09;&#xff0c;可能需要对重建的亮度像素进行子采样&#xff0c;以匹配色度…

C++核心编程和桌面应用开发 第十八天(一元/二元谓词 内建函数对象 算术/关系/逻辑仿函数 函数适配器/取反适配器/函数指针适配器/成员函数适配器)

目录 1.函数对象 1.1函数对象特点 2.谓词 2.1一元谓词 2.2二元谓词 3.内建函数对象 3.1算术仿函数 3.2关系仿函数 3.3逻辑仿函数 4.函数适配器 5.取反适配器 5.1一元取反适配器 5.2二元取反适配器 6.函数指针适配器 7.成员函数适配器 1.函数对象 概念&#xff…

Java后端面试内容总结

先讲项目背景&#xff0c;再讲技术栈模块划分&#xff0c; 讲业务的时候可以先讲一般再特殊 为什么用这个&#xff0c;好处是什么&#xff0c;应用场景 Debug发现问题/日志发现问题. QPS TPS 项目单元测试&#xff0c;代码的变更覆盖率达到80%&#xff0c;项目的复用性高…

P3-2.【结构化程序设计】第二节——知识要点:多分支选择语句

讲解视频&#xff1a; P3-2.【结构化程序设计】第二节——知识要点&#xff1a;多分支选择语句 知识要点&#xff1a;多分支选择语句 一、任务分析 已知某公司员工的保底薪水为500&#xff0c;某月销售商品的利润profit(整数)与利润提成的关系如下(单位&#xff1a;元)&#…

关于Android Studio Koala Feature Drop | 2024.1.2下载不了插件的解决办法

解决 androidStudio Settings->Plugins下载插件&#xff0c;点击install后没反应&#xff0c;同时插件描述相关显示不出来 第一步&#xff1a; 第二步&#xff1a; 点击设置&#xff0c;勾选Auto-detect proxy settings&#xff0c;输入网址 https://plugins.jetbrains.com…

UE中查“资源包因何变脏”的方式

“脏”&#xff08;Dirty&#xff09;的意思 当用户对一个资源包&#xff08;关卡&#xff0c;或材质等美术资源&#xff09;做出了修改&#xff0c;变得与磁盘上存储的内容有差异时&#xff0c;UE会对其“标脏”&#xff08;Mark Dirty&#xff09;&#xff0c;显示为 * 符号…

leetcode 2710 移除字符串中的尾随零

1.题目要求: 2.题目代码: class Solution { public:string removeTrailingZeros(string num) {while(num[num.size() - 1] 0){num.pop_back();}return num;} };

Iceoryx2:高性能进程间通信框架(中间件)

文章目录 0. 引言1. 主要改进2. Iceoryx2 的架构3. C示例代码3.1 发布者示例&#xff08;publisher.cpp&#xff09;3.2 订阅者示例&#xff08;subscriber.cpp&#xff09; 4. 机制比较5. 架构比较6. Iceoryx vs Iceoryx2参考资料 0. 引言 Iceoryx2 是一个基于 Rust 实现的开…

10.30.2024刷华为OD

文章目录 HJ20 密码验证合格程序&#xff08;难过全部例子 list取数左开有闭 [0,3) &#xff09;HJ21 简单密码HJ22 汽水瓶 (数学游戏...)HJ23 (dic就是map&#xff0c;注意怎么用&#xff0c; 善用values()和keys()函数返回list)语法知识记录 (留意转换的字符怎么拼接) HJ20 密…

【问题记录】解决VMware虚拟机中鼠标侧键无法使用的问题

前言 有项目需要在Linux系统中开发&#xff0c;因为要测试Linux中相关功能&#xff0c;要用到shell&#xff0c;在Windows中开发太麻烦了&#xff0c;因此我选择使用UbuntuXfce4桌面来开发&#xff0c;这里我用到了Linux版本的IDEA&#xff0c;除了快捷键经常和系统快捷键冲突…

【337】基于springboot的校园失物招领系统

校园失物招领网站的设计与实现 摘要 近年来&#xff0c;信息化管理行业的不断兴起&#xff0c;使得人们的日常生活越来越离不开计算机和互联网技术。首先&#xff0c;根据收集到的用户需求分析&#xff0c;对设计系统有一个初步的认识与了解&#xff0c;确定校园失物招领网站…

彻底理解链表(LinkedList)结构

目录 比较操作结构封装单向链表实现面试题 循环链表实现 双向链表实现 链表&#xff08;Linked List&#xff09;是一种线性数据结构&#xff0c;由一组节点&#xff08;Node&#xff09;组成&#xff0c;每个节点包含两个部分&#xff1a;数据域&#xff08;存储数据&#xff…

使用Docker Compose搭建多服务应用

使用Docker Compose搭建多服务应用 Docker Compose简介 安装Docker Compose 在Linux上安装Docker Compose 在macOS上安装Docker Compose 在Windows上安装Docker Compose 创建项目结构 Flask应用 安装依赖 Dockerfile 配置Docker Compose 构建和运行应用 访问应用 高级配置 环…