小程序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远程控制开发板上的继电器, 远程显示单 ...
随机推荐
- Nginx报错:nginx: [error] OpenEvent("Global\ngx_reload_14944") failed (2: The system cannot find the file specified)
nginx.exe -s reload 执行报错 错误原因: Nginx 尚未启动导致,执行 start nginx 命令开启Nginx nginx.exe -s reload 至此问题解决
- uni-app学习之路
MVC模式1. model:模型层,数据的增删改查2. view:视图层,前端页面3. controller:控制层,处理业务 文件页面结构1. 页面以`.vue`结尾2. `template`,`s ...
- hive grouping set
reference https://www.cnblogs.com/erlou96/p/13564191.html data-demo 2015-03,2015-03-10,cookie1 2015- ...
- Windows安装hexo并配置nginx
前言 Hexo是一款基于NodeJS的静态博客框架,依赖少且易于安装使用,可以方便地生成静态网页. 本文记录Windows安装hexo,配置第三方主题Fluid,并配置nginx的全过程. nodej ...
- python机器学习经典算法代码示例及思维导图(数学建模必备)
最近几天学习了机器学习经典算法,通过此次学习入门了机器学习,并将经典算法的代码实现并记录下来,方便后续查找与使用. 这次记录主要分为两部分:第一部分是机器学习思维导图,以框架的形式描述机器学习开发流程 ...
- 一个超经典 WinForm 卡死问题的最后一次反思
一:背景 1. 讲故事 在我分析的 200+ dump 中,同样会遵循着 28原则,总有那些经典问题总是反复的出现,有很多的朋友就是看了这篇 一个超经典 WinForm 卡死问题的再反思 找到我,说 ...
- WPF-实现屏幕截图(一)
源码路径:https://gitee.com/LiuShuiRuoBing/wpf_screen_cut 实现功能 实现基本的截屏窗体 鼠标随意选择截图区域 鼠标抬起时弹出按钮区 快捷键Ctrl+Al ...
- 《CTFshow-Web入门》08. Web 71~80
@ 目录 web71 题解 原理 web72 题解 原理 web73 题解 web74 题解 web75 题解 原理 web76 题解 web77 题解 原理 web78 题解 原理 web79 题解 ...
- 在本地运行Kusto服务器
我喜欢Kusto (或商用版本 Azure Data Explorer,简称 ADX) 是大家可以有目共睹的,之前还专门写过这方面的书籍,请参考 大数据分析新玩法之Kusto宝典, 很可能在今年还会推 ...
- 详细解释一下Spring是如何解决循环依赖问题的
Spring是如何解决循环依赖问题的? 我们都知道,如果在代码中,将两个或多个Bean互相之间持有对方的引用就会发生循环依赖.循环的依赖将会导致注入死循环,这是Spring发生循环依赖的原因 循环依赖 ...