方法很简单 ,只需要在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. windows配置supervisor实现nginx自启

    前言 有些老项目的nginx部署在windows server上,而且服务器比较老旧,经常异常重启.鉴于个人并不熟悉windows server,因此配置supervisor自启nginx,实现win ...

  2. Programming abstractions in C阅读笔记:p123-p126

    <Programming Abstractions In C>学习第50天,p123-p126,总结如下: 一.技术总结 1.notaion 这也是一个在计算机相关书籍中出现的词,但有时却 ...

  3. 带你上手基于Pytorch和Transformers的中文NLP训练框架

    本文分享自华为云社区<全套解决方案:基于pytorch.transformers的中文NLP训练框架,支持大模型训练和文本生成,快速上手,海量训练数据>,作者: 汀丶 . 1.简介 目标: ...

  4. Pytest 框架执行用例流程浅谈

    背景: 根据以下简单的代码示例,我们将从源码的角度分析其中的关键加载执行步骤,对pytest整体流程架构有个初步学习. 代码示例: import pytest def test_add(): asse ...

  5. 以程序员为视角,关于商品详情API接口的说明

    ​ 商品详情API接口是现代电商平台中非常重要的一部分,它提供了获取淘宝商品详细信息的能力.作为一个程序员,了解如何调用这个API接口是非常关键的. 首先,我们需要明确的是,API接口是应用程序与服务 ...

  6. iOS发送探针日志到日志系统的简单实现

    通过参考Testin的SDK实现方式,我们大致可以确定他们背后的实现方式: 首先,通过加载Testin的SDK,然后收集各种七七八八的数据,再通过socket发送数据到云端. 云端我们已经有了,就是h ...

  7. 正则表达式快速入门三: python re module + regex 匹配示例

    使用 Python 实现不同的正则匹配(从literal character到 其他常见用例) reference python regular expression tutorial 目录 impo ...

  8. 每日一题:AJAX进度监控(附可运行源码)

    1.什么是AJAX AJAX(Asynchronous JavaScript and XML)是一种用于在网页上进行异步通信的技术.它允许在不刷新整个页面的情况下,通过在后台与服务器进行数据交换来更新 ...

  9. Dubbo3应用开发—XML形式的Dubbo应用开发和SpringBoot整合Dubbo开发

    Dubbo3程序的初步开发 Dubbo3升级的核心内容 易⽤性 开箱即⽤,易⽤性⾼,如 Java 版本的⾯向接⼝代理特性能实现本地透明调⽤功能丰富,基于原⽣库或轻量扩展即可实现绝⼤多数的 微服务治理能 ...

  10. 【效率提升】maven 转 gradle 实战

    一.灵魂三问 1.gradle 是什么? 一个打包工具, 是一个开源构建自动化工具,足够灵活,可以构建几乎任何类型的软件,高性能.可扩展.能洞察等.其中洞察,可以用于分析构建过程中数据,提供分析参考, ...