首页 > 其他分享 >uniapp视频封面层级问题

uniapp视频封面层级问题

时间:2023-10-23 15:14:27浏览次数:31  
标签:uniapp 层级 视频 app 封面 使用

1、app端建议使用视频的第一帧作为视频封面,自定义封面遮罩无法显示,当封面图是白色背景时看不到视频播放按钮。

2、h5直接使用封面属性可正常展示。

 

<!-- #ifdef APP-PLUS -->
                <!-- app使用视频的第一帧作为封面,自定义封面没显示遮罩,浅色封面看不到按钮 -->
                <video id="myVideo" object-fit="cover"
                    :poster="courseInfo.course.url+'?x-oss-process=video/snapshot,t_0,f_jpg'"
                    :show-fullscreen-btn="true" :src="courseInfo.course.url" controls :enable-play-gesture="true"
                    @play="toPlay" @pause="toPause" @timeupdate="timeupdate">
                <!-- #endif -->
                
                <!-- #ifdef H5 -->
                <video id="myVideo" object-fit="cover"
                    :poster="courseInfo.course.thumb"
                    :show-fullscreen-btn="true" :src="courseInfo.course.url" controls :enable-play-gesture="true"
                    @play="toPlay" @pause="toPause" @timeupdate="timeupdate">
                <!-- #endif -->
                </video>

app使用封面属性poster 作为视频封面的效果:

 

 

app使用视频第一帧作为视频封面的效果:

 

 

标签:uniapp,层级,视频,app,封面,使用
From: https://www.cnblogs.com/LindaBlog/p/17782485.html

相关文章

  • uniapp环境配置
    uniapp笔记1.Uniapp-原生环境搭建[1]接口模块环境1:【安装IDEA软件】环境2:【安装maven】(1)下载并解压到非C盘目录【原因:maven配置本地仓库-企业非常大!一直在西在jar包】(2)创建一个本地仓库【步骤:在maven的根路径创建一个文件夹repo】(3)集成本地仓库路劲的配置,【作用:使你配置的本......
  • uniCloud cms 自媒体资讯新闻文章应用系统 uniapp+uniCloud+AntDesignVue Life cms
    介绍LifeCMS是uniCloud+uni-app云端一体全套CMS/自媒体/资讯/新闻/文章应用系统,前台包含注册、登录(账号密码登录、短信登录、微信手机号快捷登录、微信一键登录、App手机一键登录、Apple登录)、文章列表、文章详情、搜索、广告、分享、评论、回复、点赞、收藏、用户中心、意见......
  • uniapp打电话实现方法用法介绍
    一、uniapp打电话介绍uniapp是一个跨平台的开发框架,能够快速构建出高效、可靠、易维护的移动应用程序。在移动端开发中,打电话是一项常见的功能,而uniapp也提供了多种实现方法,下面将详细介绍uniapp中打电话的实现方法。二、使用系统API实现打电话在uniapp中,可以使用系统API实现打电话......
  • uniapp App端实人认证
    1、充点钱,因为调一次要8毛多2、右键项目,创建unicloud云开发环境3、创建一个文件夹,名称随便  uni-cloud-verify 4、右键文件夹,管理云函数的扩展库/公共模块依赖 点这个,然后确认5、配置manifest.json里面App模块配置打开实人认证,然后打自定义基座包6、正在打包loadin......
  • uniapp页面生命周期函数执行时机
    一、总览  二、分析通过浏览器控制台得到:从上述实验我们可以得到以下结论:onLoad对应created,onReady对应mounted,不过uniapp页面生命周期函数执行时机略早于组件生命周期函数,在页面级vue文件中可优先考虑使用页面级生命周期函数。需要依赖页面传参逻辑的需使用on......
  • 小程序分享pdf文件(uniapp)
    share(){wx.downloadFile({url:'',//下载urlsuccess(res){//下载完成后转发wx.shareFileMessage({filePath:res.tempFilePath,suc......
  • uniapp全局修改字体
    App.vue中<stylelang="scss"> /*注意要写在第一行,同时给style标签加入lang="scss"属性*/ @import"uview-ui/index.scss"; @font-face{ font-family:'selffont'; src:url("/static/fonts/AlimamaFangYuanTiVF-Thin.ttf&quo......
  • uniapp系列-图文并茂教你配置uniapp开发环境
    环境安装1.安装node.js(版本18+/16+)在搭建Vue开发环境之前,请先下载node.js。Node可从官方网站下载,也可从中文网站下载。根据你的电脑选择32位或64位。网站:Node或者访问历史版本查看node版本C:\Users>node-v#v16.15.02.安装yarnnpminstall-gy......
  • 解决uniapp button type ts类型冲突问题
     安装类型声明文件npmi-D@dcloudio/typesminiprogram-api-typings @uni-helper/uni-app-types @uni-helper/uni-ui-types//tsconfig.json{"compilerOptions":{//..."types":["@dcloudio/types",//uni-appAPI类型......
  • uniapp部分浏览器input框设置disabled之后点击事件不生效
    给input设置css属性,外边包个盒子抛出点击事件 .disabled{pointer-events:none;}......