HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?

简介: HBuilderX使用uniapp中的video标签开发视频应用APP,出现视频覆盖<view>图层无法遮住等问题如何解决?

1、普通情况:图片要遮住<video></video>

请使用cover-image或cover-view


情况1:如上图,注意要使用以下位置才能达到遮住的效果

//方法1:放入video中----------------------------------------
<video>
    <cover-image></cover-image>
</video>
//方法2:放入video同层级----------------------------------------
<video></video>
<cover-image></cover-image>
//放后面or放前面都可以
<cover-image></cover-image>
<video></video>
----------------------------------------
//然后在css中定义cover-image的位置为
position: absolute;
right:XXX;//定位
top:XXX;//定位


情况2:如上图,就直接用cover-view自定义一个顶部组件,就可以遮住视频了

2、和swiper组件混搭使用,出现左右滑动video的时候,浮动在其上面的cover-view或cover-image会有飘忽不定,位置错位的情况,如何解决?

如上图,当左右滑动swiper-item的时候,就出现image的图标位置错位了

//一定要将标签放入<xxx></xxx>之间----------------------------------------
<uni-swiper-dot>
  <swiper>
    <swiper-item v-for="(item,index) in items">
      <image:src="item.videoCover">
                //一定要放在这里
        <cover-image src="/img/xxx.png"></cover-image>
                //一定要放在这里
        <cover-view>这里放内容</cover-view>
      </image>
    </swiper-item>
  </swiper>
</uni-swiper-dot>


相关文章
|
5月前
|
Java
照片一键生成眨眼视频app,手机照片一键生成眨眼动图,通过JAR代码实现效果
这是一个自动生成眨眼GIF动画的Java程序,包含主程序处理、图像变形和GIF生成三个模块。输入照片路径,自动识别人脸眼睛位置,生成闭眼、半闭眼等多帧图像,并合成为眨眼动效GIF文件。
|
8月前
|
API 开发者 Windows
uniapp 极速上手鸿蒙开发
uniapp 自版本 `4.28.2024092502` 起支持鸿蒙应用开发,现版本 `4.36.2024112817` 同时支持鸿蒙应用和元服务开发。本文介绍使用 HBuilderX 4.24+ 和 DevEco Studio 进行环境配置、项目创建及运行的详细步骤,涵盖从 AGC 平台新建项目、配置证书到最终运行项目的全流程,帮助开发者快速上手鸿蒙开发。注意:HBuilderX 4.31+ 构建的鸿蒙运行包不支持 x86_64 平台,需使用真机调试。
814 85
uniapp 极速上手鸿蒙开发
|
6月前
|
JavaScript 小程序 API
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
407 12
UniApp X:鸿蒙原生开发的机会与DCloud的崛起之路·优雅草卓伊凡
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
460 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
6月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
608 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
10月前
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
625 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
|
7月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
724 12
|
8月前
|
小程序
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
565 1
【04】微信支付商户申请下户到配置完整流程-微信开放平台移动APP应用通过-微信商户继续申请-微信开户函-视频声明-以及对公打款验证-申请+配置完整流程-优雅草卓伊凡
|
10月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
467 0
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
283 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章