方法很简单 ,只需要在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. Flask工厂模式蓝图使用Celery实例【亲测可用,已应用于项目中】

    单一模式运行Celery在官方文档中已经贴出范例代码,这里我们不过多介绍. 在使用Flaks编写大型项目时,使用工厂模式的好处显而易见.因在Celery4.x以上版本已经抛弃了init_app方法,所 ...

  2. 微软面向企业的Private ChatGPT 参考应用 Chat Copilot

    这两天你可能看过这篇文章:微软面向企业的Private ChatGPT 开源!超详细安装流程反馈![1], 这篇文章顶多就是一个Azure OpenAI 服务的简单Demo, 就连插件机制都没有,这也 ...

  3. C++类学习心得

    参考文献:https://www.cnblogs.com/xiongxuanwen/p/4290086.html 类的一个重要点是构造函数,其官方说明为: 构造函数是一个特殊的.与类同名的成员函数,用 ...

  4. 一文了解Gin对Cookie的支持

    1. 引言 本文将从Web应用程序处理请求时需要用户信息,同时HTTP又是无状态协议这个矛盾点出发.从该问题出发,简单描述了解决该问题的Token 机制,进而引出Cookie的实现方案. 基于此我们将 ...

  5. jmeter 二次开发详解

    背景: JMeter 是一个功能强大的性能测试工具,但它可能无法满足特定项目或组织的特定需求.通过进行二次开发,可以定制 JMeter,使其适应具体项目的需求.例如,可能需要添加自定义的 测试元件.报 ...

  6. 对称加密 vs 非对称加密

    计算机网络在给我们带来便利的同时,也存在很多安全隐患,比如信息伪造,病毒入侵,端点监听,SQL 注入等,给我们日常生活造成很严重的影响. 那么这篇文章我就跟大家聊聊常见的网络安全隐患,只作为科普,不能 ...

  7. DotNetGuide新增C#/.NET/.NET Core充电站(让你学习不迷路)

    DotNetGuide简介 记录.收集和总结C#/.NET/.NET Core基础知识.学习路线.开发实战.学习视频.文章.书籍.项目框架.社区组织.开发必备工具.常见面试题.面试须知.简历模板.以及 ...

  8. 深入解析 C++ 中的 ostringstream、istringstream 和 stringstream 用法

    引言: 在 C++ 中,ostringstream.istringstream 和 stringstream 是三个非常有用的字符串流类,它们允许我们以流的方式处理字符串数据.本文将深入探讨这三个类的 ...

  9. Redis系列之——持久化

    一 持久化的作用 1.1 什么是持久化 redis的所有数据保存在内存中,对数据的更新将异步的保存到硬盘上 1.2 持久化的实现方式 快照:某时某刻数据的一个完成备份, -mysql的Dump -re ...

  10. MongoDB数据的导出导入及日志分析

    一.远程连接导出报错超时 mongodump -h 10.110.63.150:27017 -u'admin' -p'passwd!' --authenticationDatabase flowtes ...