方法很简单 ,只需要在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去除上下黑边的更多相关文章

  1. 小程序 video 组件同层渲染公测

    小程序 video 组件同层渲染公测   各位开发者: 大家好. 小程序原生组件因脱离 WebView 渲染而存在一些使用上的限制,为了方便开发者更好地使用原生组件进行开发,我们对小程序原生组件引入了 ...

  2. 「小程序JAVA实战」小程序页面的上拉下拉刷新(50)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxuyemiandeshanglaxialashuaxin49/ 之前已经 ...

  3. 微信小程序——video使用总结

    关于小程序video的一些基本使用方法,可点击这里稍作了解. 需求: 1.默认显示封面: 2.一个视频播放的时候,其他视频停止播放,并显示封面. 解决问题思路: 1.通过wx:if判断当前视频是否是播 ...

  4. 微信小程序自动去除input空格的方法

    当用户输入账号或者密码的时候,可能会有输入空格的情况,但是实际需要是不能够有空格的,所以我们要做一个去除空格,并且适应所有input的name参数的方法,下面请看源码: wxml: <input ...

  5. 小程序实现图片上传,预览以及图片base64位处理

    最近一段时间在做小程序项目,第一期功也完工了.需要好好总结一下经验,把项目中遇到的问题好好总结一下,遇到的问题,踩过的坑.今天写一个小程序实现图片上传,预览,以及删除,图片base64位处理.下面就是 ...

  6. 微信小程序初体验(上)

    版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...

  7. 微信小程序 - video组件poster无效 / 视频播放列表

    在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...

  8. 如何使用微信小程序video组件播放视频

    相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象.那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了.今天我们就给大家演示一下,如何用微信小程序组件video播放视频.我们 ...

  9. 微信小程序video组件出现无法播放或卡顿

    微信小程序使用video组件播放视频的时候,会出现卡顿或者无法播放的问题,加一个custom-cache=”true“即可解决,这个属性文档上没有,是从小程序开发社区中get到的.

  10. ESA2GJK1DH1K微信小程序篇: 测试微信小程序扫描Air202上面的二维码绑定设备,并通过MQTT控制设备

    前言 一,微信小程序篇小程序下载(该功能为小程序篇基础功能源码) 实现功能概要 微信小程序通过扫描GPRS上的二维码,绑定GPRS设备.然后使用小程序通过GPRS远程控制开发板上的继电器, 远程显示单 ...

随机推荐

  1. 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 至此问题解决

  2. uni-app学习之路

    MVC模式1. model:模型层,数据的增删改查2. view:视图层,前端页面3. controller:控制层,处理业务 文件页面结构1. 页面以`.vue`结尾2. `template`,`s ...

  3. hive grouping set

    reference https://www.cnblogs.com/erlou96/p/13564191.html data-demo 2015-03,2015-03-10,cookie1 2015- ...

  4. Windows安装hexo并配置nginx

    前言 Hexo是一款基于NodeJS的静态博客框架,依赖少且易于安装使用,可以方便地生成静态网页. 本文记录Windows安装hexo,配置第三方主题Fluid,并配置nginx的全过程. nodej ...

  5. python机器学习经典算法代码示例及思维导图(数学建模必备)

    最近几天学习了机器学习经典算法,通过此次学习入门了机器学习,并将经典算法的代码实现并记录下来,方便后续查找与使用. 这次记录主要分为两部分:第一部分是机器学习思维导图,以框架的形式描述机器学习开发流程 ...

  6. 一个超经典 WinForm 卡死问题的最后一次反思

    一:背景 1. 讲故事 在我分析的 200+ dump 中,同样会遵循着 28原则,总有那些经典问题总是反复的出现,有很多的朋友就是看了这篇 一个超经典 WinForm 卡死问题的再反思 找到我,说 ...

  7. WPF-实现屏幕截图(一)

    源码路径:https://gitee.com/LiuShuiRuoBing/wpf_screen_cut 实现功能 实现基本的截屏窗体 鼠标随意选择截图区域 鼠标抬起时弹出按钮区 快捷键Ctrl+Al ...

  8. 《CTFshow-Web入门》08. Web 71~80

    @ 目录 web71 题解 原理 web72 题解 原理 web73 题解 web74 题解 web75 题解 原理 web76 题解 web77 题解 原理 web78 题解 原理 web79 题解 ...

  9. 在本地运行Kusto服务器

    我喜欢Kusto (或商用版本 Azure Data Explorer,简称 ADX) 是大家可以有目共睹的,之前还专门写过这方面的书籍,请参考 大数据分析新玩法之Kusto宝典, 很可能在今年还会推 ...

  10. 详细解释一下Spring是如何解决循环依赖问题的

    Spring是如何解决循环依赖问题的? 我们都知道,如果在代码中,将两个或多个Bean互相之间持有对方的引用就会发生循环依赖.循环的依赖将会导致注入死循环,这是Spring发生循环依赖的原因 循环依赖 ...