小程序video去除上下黑边
方法很简单 ,只需要在video上增加属性
<video objectFit="cover" />
或者
可通过 wxss 设置宽高
<view class="video">
<video object-fit="" style="height:{{height}}px; width:{{width}}px;"
src=""
bindloadedmetadata="videometa"
binderror="videoErrorCallback"
></video>
</view>
bindloadedmetadata:视频元素加载完成时触发。
对bindloadedmetadata 绑定事件 videometa
videometa:function (e) {
var that = this;
//获取系统信息
wx.getSystemInfo({
success (res) {
//视频的高
var height = e.detail.height; //视频的宽
var width = e.detail.width; //算出视频的比例
var proportion = height / width; //res.windowWidth为手机屏幕的宽。
var windowWidth = res.windowWidth; //算出当前宽度下高度的数值
height = proportion * windowWidth;
that.setData({
height,
width:windowWidth
});
}
})
},
小程序video去除上下黑边的更多相关文章
- 小程序 video 组件同层渲染公测
小程序 video 组件同层渲染公测 各位开发者: 大家好. 小程序原生组件因脱离 WebView 渲染而存在一些使用上的限制,为了方便开发者更好地使用原生组件进行开发,我们对小程序原生组件引入了 ...
- 「小程序JAVA实战」小程序页面的上拉下拉刷新(50)
转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxuyemiandeshanglaxialashuaxin49/ 之前已经 ...
- 微信小程序——video使用总结
关于小程序video的一些基本使用方法,可点击这里稍作了解. 需求: 1.默认显示封面: 2.一个视频播放的时候,其他视频停止播放,并显示封面. 解决问题思路: 1.通过wx:if判断当前视频是否是播 ...
- 微信小程序自动去除input空格的方法
当用户输入账号或者密码的时候,可能会有输入空格的情况,但是实际需要是不能够有空格的,所以我们要做一个去除空格,并且适应所有input的name参数的方法,下面请看源码: wxml: <input ...
- 小程序实现图片上传,预览以及图片base64位处理
最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...
- 微信小程序初体验(上)
版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...
- 微信小程序 - video组件poster无效 / 视频播放列表
在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...
- 如何使用微信小程序video组件播放视频
相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...
- 微信小程序video组件出现无法播放或卡顿
微信小程序使用video组件播放视频的时候,会出现卡顿或者无法播放的问题,加一个custom-cache=”true“即可解决,这个属性文档上没有,是从小程序开发社区中get到的.
- ESA2GJK1DH1K微信小程序篇: 测试微信小程序扫描Air202上面的二维码绑定设备,并通过MQTT控制设备
前言 一,微信小程序篇小程序下载(该功能为小程序篇基础功能源码) 实现功能概要 微信小程序通过扫描GPRS上的二维码,绑定GPRS设备.然后使用小程序通过GPRS远程控制开发板上的继电器, 远程显示单 ...
随机推荐
- 堆 Heap & 栈 Stack(.Net)【概念解析系列_3】【C# 基础】
〇.前言 本文主要围绕 .Net 框架中的托管堆(Heap,简称堆)和堆栈(Stack,简称栈)展开. .Net 程序在 CLR(Common Language Runtime 公共语言运行时)上运行 ...
- noip2022保龄记
第一次参加noip,写第一篇游记纪念一下 天还挺热,今天就穿了个秋衣加卫衣,本来还打算穿袄子来着,但是爸妈没让 到了八中才发现好像没带水,然后我的老父亲跑到不知道哪里去给买了一瓶(八中门口看不到有小卖 ...
- 记录一次解决数据库连接池连接泄露BUG
1 BUG现象 系统并发请求,系统停滞无法使用,所有接口都是无法与后端进行交互的状态,系统并没有宕机 2 BUG的业务流程 插入分数方法 涉及插入表ABCD 加了声明式事务 查询分数方法 涉及表ABC ...
- arthas的安装及使用
arthas的安装及使用 官方文档 安装 #1.下载 https://arthas.aliyun.com/download/latest_version?mirror=aliyun #2.将下载文件上 ...
- Zimbra禁止接收带有加密的文件邮件 提醒病毒(Heuristics.Encrypted.PDF)
最近碰到一个国际性大客户,一定要发送经过加密的文件,因为是合约相关的文件,对方公司有这方面要求.但是Zimbra默认是禁止接收加密的文件 - 'Block encrypted archives',这样 ...
- 定义一个函数,传入一个字典和一个元组,将字典的值(key不变)和元组的值交换,返回交换后的字典和元组
知识点:zip() 函数用于将可迭代的对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的列表. li=[3,4,5] t=(7,8,9) print(list(zip(li,t ...
- Java并发编程 优化多任务查询接口
代码展示 @RestController @RequestMapping("/api") public class TestController { @Resource priva ...
- KMP字符串对比算法及next数组计算
(注:该贴主要运用python实现该算法) 先谈谈KMP算法吧.KMP算法的全称是Knuth-Morris-Pratt 算法,它是用来进行字符串查找,即在某个主字符串里面找到某个特定子字符串.但是好像 ...
- GDB苹果网页一键打包工具(IOS,IPA,苹果应用网页打包,WINDOWS平台)
工具简介 GDB苹果网页一键打包工具(IOS,IPA,苹果应用网页打包,Windows平台)可以把本地HTML项目或者网站打包为一个苹果应用IPA文件,无需编写任何代码,支持在苹果设备上安装运行.作为 ...
- 在线问诊 Python、FastAPI、Neo4j — 创建 疾病节点
目录 疾病数据 创建节点 根据检查结果.医生的临床经验得出疾病 疾病数据 disease_data.csv 建议值用""引起来.避免中间有,号造成误识别 疾病 "干眼&q ...