方法很简单 ,只需要在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. 原来TypeScript中的接口和泛型这么好理解

    "接口"和"泛型"是 TypeScript 相比于 JavaScript 新增的内容,都用于定义数据类型 前面两篇文章总结了TypeScript中的 类型注解. ...

  2. [nginx]反向代理grpc

    前言 nginx从1.13.10版本开始提供对gRPC代理的支持.由于grpc基于http2,因此编译nginx时需要添加参数--with-http_v2_module来启用对http2协议的支持. ...

  3. [语音识别] 基于Python构建简易的音频录制与语音识别应用

    语音识别技术的快速发展为实现更多智能化应用提供了无限可能.本文旨在介绍一个基于Python实现的简易音频录制与语音识别应用.文章简要介绍相关技术的应用,重点放在音频录制方面,而语音识别则关注于调用相关 ...

  4. VictoriaLogs:一款超低占用的 ElasticSearch 替代方案

    背景 前段时间我们想实现 Pulsar 消息的追踪流程,追踪实现的效果图如下: 实现其实比较简单,其中最重要的就是如何存储消息. 消息的读取我们是通过 Pulsar 自带的 BrokerInterce ...

  5. php-fpm的配置

    pass 对应的php-fpm socket,这样nginx就能将请求转发给php-fpm,这个的实现真的是精彩,为什么,因为php-fpm是负责管理多个php进程的,他的稳定性令人赞叹. index ...

  6. 4399 Flash游戏专用浏览器, 无需安装Flash插件

    目前所有的主流浏览器都已经不再支持Flash了,即使有一些国内浏览器还支持flash,但只能安装国内特供版Flash Player. 但问题的关键在于,这个国内特供版跟 Adobe 海外发行的版本是两 ...

  7. Windows上Dart安装

    过程 *1 去github上下载一个release包或者直接将flutter通过git clone下来 *2 将下载下来的flutter/bin添加到path中 *3 此时运行flutter或者flu ...

  8. Docker Swarm + Harbor + Portainer 打造高可用,高伸缩,集群自动化部署,更新。

    Docker Swarm是Docker官方自带的容器编排工具,Swarm,Compose,Machine合称Docker三剑客.Docker Swarm对于中小型应用来说,还是比较方便,灵活,当然K8 ...

  9. 各种SQL连接符Join

    一.连接符分类,内连接,外连接 1.内连接:Inner Join简写Join. 2.外连接:Left Outer Join 简写Left Join:Right Outer Join 简写Right J ...

  10. TIPTOP GP ERP二次开发规范说明

    TIPTOP GP ERP二次开发规范说明 TIPTOP ERP共分三大区:topstd(标准区) + toppord(正式区) + toptest(测试区) 标准区                  ...