小程序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远程控制开发板上的继电器, 远程显示单 ...
随机推荐
- Cesium SuperMap问题调研汇总
https://segmentfault.com/a/1190000040577369?sort=newest
- 【Nacos篇】Nacos基本操作及配置
官方文档:https://nacos.io/zh-cn/docs/v2/ecology/use-nacos-with-spring-cloud.html 前置条件:SpringCloud脚手架 单机模 ...
- CVE-2022-42475-FortiGate-SSLVPN HeapOverflow 学习记录
前言 之前就想复现这个洞,不过因为环境的问题迟迟没有开工.巧在前一阵子有个师傅来找我讨论劫持 ssl结构体中函数指针时如何确定堆溢出的偏移,同时还他把搭建好了的环境发给了我,因此才有了此文. 如何劫持 ...
- 《SQL与数据库基础》11. 索引
目录 索引 概述 结构 B-Tree B+Tree Hash 思考 分类 语法 SQL性能分析 SQL执行频率 慢查询日志 profile详情 explain执行计划 索引失效情况 范围查询 索引列运 ...
- 修复linux系统更新后Conky无法启动的问题
kali系统更新后的版本为 ~$uname -a Linux 4rk 5.9.0-kali5-amd64 #1 SMP Debian 5.9.15-1kali1 (2020-12-18) x86_64 ...
- 第3章 Git最最常用命令大全
相信来查命令的同学,根本不是来学具体某个命令的作用的,只是想来查看命令的语法,博主深知这一点(因为博主也是这样过来的),相信这篇文章,将会带给你在工作中最常用的命令,让你一打开就是命令大全!! 喜欢这 ...
- PLC通过Modbus转Profinet网关与合康变频器Modbus通讯案例
PLC通过Modbus转Profinet网关(XD-MDPN100)与合康变频器Modbus通讯,实现了两个设备之间的数据交互.Profinet是一种基于以太网的实时工控网络协议,而Modbus是一种 ...
- 聊一聊 TLS/SSL
哈喽大家好,我是咸鱼 当我们在上网冲浪的时候,会在浏览器界面顶部看到一个小锁标志,或者网址以 "https://" 开头 这意味着我们正在使用 TLS/SSL 协议进行安全通信.虽 ...
- npm install xxx 后加上-s、-d、-g之间的区别?
1.npm install xxx -s npm install xxx -s.npm install xxx -S是npm install xxx --save的简写形式 局部安装,记录在packa ...
- Centos7中防火墙打开3306端口(亲测)
开放3306端口 firewall-cmd --zone=public --add-port=3306/tcp --permanent 开启防火墙 systemctl start firewa ...