如这种情况：

微信可谓是video标签的重灾区，如果你兼容了安卓的微信，那么在其他浏览器一般也没问题了除了个别（IE：你们看我干吗？）。

解决方案：

<video src="video/1.mp4" width="100%" height="100%"

            style="object-fit:cover;" id="video" type="video/mp4" webkit-playsinline playsinline preload="load">

        </video>

主要是object-fit要设置为：cover，再加上宽高为100%。object-fit最好不要是fill，因为fill会让视屏充满容器，可能导致视屏变形。

这样视屏就能自动撑满容器，并且按比例伸缩。

h5-video,视频在微信里变形、有黑边的更多相关文章

  1. 视频H5のVideo标签在微信里的坑和技巧

    随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...

  2. 【转】视频H5 video最佳实践

    原文地址:https://github.com/gnipbao/iblog/issues/11 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 ...

  3. video 标签在微信浏览器的问题解决方法

    最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题: 在微信浏览器内播放时,视频会自动全屏 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设 ...

  4. h5 的video视频控件

    h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...

  5. H5 video自定义视频控件

    1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. H5 video poster属性—设置视频封面

     打开一个视频,在点击播放之前会看到一张封面图,点击之后封面消失,随即播放视频.   若现有一需求,要你自定义给某个视频设置封面,应该怎么做呢?   此时可使用H5 video提供的poster属性即 ...

  7. 黄聪：微信h5支付demo微信H5支付demo非微信浏览器支付demo微信wap支付

    一.首先先确定H5支付权限已经申请! 二.开发流程 1.用户在商户侧完成下单,使用微信支付进行支付 2.由商户后台向微信支付发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB ...

  8. 亲历H5移动端游戏微信支付接入及那些坑（一）——支付方式与坑

    最近项目进入中后期,开始接入支付.要求是使用微信支付,呵呵,好笑的是不知老板从哪里听来的,居然和我说只要是熟手,接个微信支付两小时搞定,我只能再次呵呵.先不说支付处理逻辑,而且公司本来也没现成的接入模 ...

  9. 如何将h5网页改成微信网页

    1.如何将h5网页改成微信网页 1.设置安全域名          先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.         备注:登录后可在“开发者中心”查看对 ...

随机推荐

  1. ACL 的功能、匹配原则、端口号类别

    功能 1)限制网络流量.提高网络性能.例如,ACL可以根据数据包的协议,指定这种类型的数据包具有更高的优先级,同等情况下可预先被网络设备处理. 2)提供对通信流量的控制手段. 3)提供网络访问的基本安 ...

  2. log4j配置获取系统属性及默认值

    一.使用场景 1.因某些原因,我们可能将log4j中的配置变量化,进行动态获取 2.动态获取内容不存在时,我们希望能够赋上通用的值 二.语法 单变量: ${前缀:变量:-默认值} 如: ${sys:i ...

  3. [日常摸鱼]51nod1237-最大公约数之和V3-杜教筛

    题意:求$\sum_{i=1}^n \sum_{j=1}^n gcd(i,j),n<=1e10$ 之前刚好在UVA上也做过一个这样求和的题目,不过那个数据范围比较小,一开始用类似的方法 $ans ...

  4. PHP面向对象的学习（封装，继承，多态）

    这个文章就是记录  巩固一下PHP的面向对象的部分 ,无非就是封装,继承,多态等等这几部分 这里参考了一位大佬总结的文章:https://www.cnblogs.com/adaia/p/6986576 ...

  5. 关于ABAP和JSON互相转换

    关于ABAP数据结构和JSON格式转换,需要用到标准的类/UI2/CL_JSON一下两个方法, DESERIALIZE是把JSON格式转换成ABAP数据结构,SERIALIZE是把ABAP数据结构转换 ...

  6. 配置redis服务器允许远程连接

    说明 默认情况下,redis只允许本机访问.如果需要外部访问,需要修改下配置文件. 配置修改 redis.windows.conf 将bind 127.0.0.1 注释 将protected-mode ...

  7. java中游标

    package YouBiao; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.Resu ...

  8. MRP物料需求计划

    1.重订货点的采购计划. 计算方式:再订货点的库存数量 = 安全库存 + 采购提前期 * 每天消耗的数量 一旦库存数量触及再订货点的库存数量,需触发采购订单订购物料,理想的情况下 ,下次到采购订单收货 ...

  9. 访问需要HTTP Basic Authentication认证的资源的c#的实现

    string username="username"; string password="password"; //注意这里的格式哦,为 "usern ...

  10. Ubuntu 20.04 安装和编译poco 1.10.1

    1.首先安装其openssl其它依赖库,打开终端,使用root账户(sudo su),完成以下库的安装 //安装odbc相关库 apt-get install unixodbc apt-get ins ...