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

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

官网说明:uni-app官网

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

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

使用方式:

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

<DomVideoPlayerref="domVideoPlayer"src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4"autoplayloopcontrolsmuted
/><script>import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer';export default {components: {DomVideoPlayer},}
</script>

 使用效果:

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

考研资料分享系统的设计与实现(lw+演示+源码+运行)

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱&#xff0c;出错率高&#xff0c;信息安全…

[perl] 数组与哈希

数组变量以 符号开始&#xff0c;元素放在括号内 简单举例如下 #!/usr/bin/perl names ("a1", "a2", "a3");print "\$names[0] $names[0]\n"; print "size: ",scalar names,"\n";$new_names shift(names); …

项目符合行业安全标准的必要步骤与实用建议

要保障项目符合行业安全标准&#xff0c;关键在于建立全面的安全管理体系、定期进行风险评估、持续培训员工&#xff0c;以及确保合规性文件和审核流程完整。例如&#xff0c;通过建立合规文件和审核流程&#xff0c;可以系统性地跟踪项目的安全实践和合规性&#xff0c;使安全…

小米15和小米15 Pro区别没那么大,但也得看准再下手

小米15和小米15 Pro区别大总结 接下来&#xff0c;我们将从关键差别等多个方面来分析两个机型的具体区别&#xff08;Ps&#xff1a;只聊不一样的&#xff0c;没提到就是一样的&#xff09;&#xff1a; 关键差别 • 屏幕素质&#xff1a;小米15采用的是6.36英寸1.5K&#xf…

【科研绘图】3DMAX管状图表生成插件TubeChart使用方法

3DMAX管状图表生成插件TubeChart&#xff0c;一款用于制作3D管状图表的工具。可以自定义切片的数量以及随机或指定切片颜色。 【版本要求】 3dMax 2008及更高版本 【安装方法】 TubeChart插件无需安装&#xff0c;使用时直接拖动插件脚本文件到3dMax视口中打开即可&#xff0…

【Python爬虫实战】络爬虫完整指南:从TCP/IP协议到爬虫实践

网络爬虫完整指南&#xff1a;从TCP/IP协议到爬虫实践 什么是TCP/IP协议&#xff1f; TCP/IP协议&#xff08;传输控制协议/互联网协议&#xff09; 是互联网通信的核心协议套件&#xff0c;它定义了设备在互联网上如何通信的规则和方式。TCP/IP协议由多个层组成&#xff0c;其…

day05|计算机网络重难点之 HTTPS和HTTP的区别、HTTPS的工作原理(HTTPS建立连接的过程)、TCP和UDP的区别

day05|计算机网络重难点之 HTTPS和HTTP的区别、HTTPS的工作原理(HTTPS建立连接的过程&#xff09;、TCP和UDP的区别 11.HTTPS和HTTP有哪些区别12.HTTPS的工作原理(HTTPS建立连接的过程&#xff09;13.TCP和UDP的区别 11.HTTPS和HTTP有哪些区别 两者主要区别在于 安全性 和 数据…

力扣hot100-->递归/回溯

目录 递归/回溯 1. 17. 电话号码的字母组合 2. 22. 括号生成 3. 39. 组合总和 4. 46. 全排列 5. 78. 子集 递归/回溯 1. 17. 电话号码的字母组合 中等 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到…

服务器端请求微信登陆授权接口一直超时问题

环境&#xff1a; 服务器系统&#xff1a;centos 7.2 站点环境&#xff1a;nginx 遇到问题&#xff1a; 1、微信小程序端请求服务器登陆接口&#xff0c;服务端收到请求后向微信接口服务器请求数据&#xff0c;请求成功后返回数据给客户端&#xff0c;但是请求微信接口服务器经…

100种算法【Python版】第22篇——Dijkstra算法

本文目录 1 算法原理2 计算迷宫路径的步骤3 python代码:迷宫路径4 算法应用1 算法原理 Dijkstra算法由计算机科学家艾兹赫尔迪科斯彻(Edsger W. Dijkstra)于1956年提出,并于1959年发表。迪科斯彻在荷兰阿姆斯特丹的数学中心开发了这一算法,以解决最短路径问题。算法的设计…

NVR批量管理软件/平台EasyNVR多个NVR同时管理支持对接阿里云、腾讯云、天翼云、亚马逊S3云存储

随着云计算技术的日益成熟&#xff0c;越来越多的企业开始将其业务迁移到云端&#xff0c;以享受更为灵活、高效且经济的服务模式。在视频监控领域&#xff0c;云存储因其强大的数据处理能力和弹性扩展性&#xff0c;成为视频数据存储的理想选择。NVR批量管理软件/平台EasyNVR&…

Cannot read property ‘prototype’ of undefined 表单

问题就是Cannot read property ‘prototype’ of undefined 解决办法通过浏览器报错提示代码定位问题&#xff0c;解决问题 Vue项目中遇到视图不更新&#xff0c;方法不执行&#xff0c;埋点不触发等问题 一般解决方案查看浏览器报错&#xff0c;查看代码运行到那个阶段未之行…

什么是Elasticsearch?

lasticsearch 是一个开源的分布式搜索引擎和分析引擎&#xff0c;它基于 Apache Lucene 构建&#xff0c;能够快速存储、搜索和分析大量数据。Elasticsearch 的主要特点和功能包括&#xff1a; 分布式架构水平扩展&#xff1a;可以通过添加更多的节点来扩展集群&#xff0c;提高…

基于PHP的http字段查询与注册(V1)(持续迭代)

目录 版本说明&#xff1a; 实现环境&#xff08;WAMP&#xff09;&#xff1a; 数据库链接 查询页面 php处理逻辑 字段添加 版本说明&#xff1a; 该查询功能以查询http首部字段为目的实现的字段属性、字段内容的查询&#xff0c;以及对新字段信息的数据注册。 v1实现…

React Query已过时?新一代请求工具横空出世

大家好&#xff01;今天我想和你们聊聊一个让我兴奋不已的话题 —— 分页列表请求策略。你们知道吗&#xff1f;这个策略真的帮了我大忙&#xff01;它不仅让我的代码更简洁&#xff0c;还大大提升了用户体验。说实话&#xff0c;每次用到这个功能&#xff0c;我都忍不住赞叹。…

ljjh#True

// background.js // 使用 Map 存储拦截的请求数据&#xff0c;键为 interceptionId const interceptedRequests new Map(); // 使用 Map 存储 requestId 到 interceptionId 的映射 const requestIdToInterceptionIdMap new Map(); // 存储已附加调试器的标签页ID const d…

【面试经典150】day 9

目录 1.Z 字形变换 2.找出字符串中第一个匹配项的下标 3.文本左右对齐 1.Z 字形变换 class Solution {public String convert(String s, int numRows) {//明明是N字形变换if(numRows<2) return s;//rows是可扩展的字符串数组List<StringBuilder>rowsnew ArrayLi…

代码随想录 | Day36 | 动态规划 :整数拆分不同的二叉搜索树

代码随想录 | Day36 | 动态规划 &#xff1a;整数拆分&不同的二叉搜索树 动态规划应该如何学习&#xff1f;-CSDN博客 动态规划学习&#xff1a; 1.思考回溯法&#xff08;深度优先遍历&#xff09;怎么写 注意要画树形结构图 2.转成记忆化搜索 看哪些地方是重复计算…

TCP丢包,连接机制,滑动窗口解析

面向字节流 如何理解面向字节流&#xff1f; 发送缓冲区&#xff0c;我们将它当做char类型的数组&#xff0c;当发送时他们的发送序号就可以从他们的下标来获取&#xff0c;接受缓冲区也是char数组&#xff0c;再一个一个字节的向上层读取。 如何理解流动的概念 我们的报文中…

前端开发设计模式——观察者模式

目录 一、定义和特点 1. 定义 2. 特点 二、实现方式 1. 使用 JavaScript 实现观察者模式的基本结构 2. 实际应用中的实现示例 三、使用场景 1. 事件处理 2. 数据绑定 3. 异步通信 4. 组件通信 四、优点 1. 解耦和灵活性 2. 实时响应和数据一致性 3. 提高代码的可…