如这种情况：

微信可谓是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. WPF TextBox 实现CornerRadius圆角

    <Grid Background="Gray" Height="230" Width="229"> <Border Cor ...

  2. 【智简联接，万物互联】华为云·云享专家董昕：Serverless和微服务下， IoT的变革蓄势待发

    摘要:Serverless.微服务,这些新技术和IoT有什么关系?纵观IoT行业的发展,云服务又扮演了什么角色? IoT并不是一个新名词.新技术,很长一段时间,它甚至给人一种"下工地&quo ...

  3. react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

    第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...

  4. 2020年下征文+没有计算机经验的宝妈也可以轻松领证一次过关啦 nice ！相信努力总会收获

    2020年下征文+没有计算机经验的宝妈也可以轻松领证http://www.1634.com.cn/ruankao/forum.php?mod=viewthread&tid=5363&f ...

  5. 是的，你没看错！Python可以实现自动化办公

    是的,你没看错!Python可以实现自动化办公 公众号[伤心的辣条],如今越来越多的人加入到学习Python的队伍当中,尤其是对于很多职场人来说,不管你是程序员还是非程序员,Python已经为很多职场 ...

  6. kali 2020安装docker

    环境准备 kali虚拟机2020.01x64位版本 安装docker官方文档:https://docs.docker.com/engine/installation/linux/docker-ce/d ...

  7. 【入门必看】不理解「对象」？很可能有致命bug：简单的Python例子告诉你

    简介:越来越多的人要在学习工作中用到『编程』这个工具了,其中很大一部分人用的是Python.大部分人只是做做简单的科研计算.绘图.办公自动化或者爬虫,但-- 这就不需要理解「指针与面向对象」了吗? 在 ...

  8. 获取Web项目中的控制器类以及类中Action方法

    前言 在使用时需要修改命名空间.需要过滤控制器.需要过滤Action方法.结果生成表的插入语句. 代码 public ActionResult ReloadData() { #region 获取所有的 ...

  9. [.NET] - EventSource类的使用

    EventSource类: 这个类是在.NET 4.5新推出的一个类,用来提供创建事件用于 Windows 事件跟踪的功能 (ETW).在之前如果要配置一个Event Tracing for Wind ...

  10. Flutter低版本迁移到高版本

    记录一次Flutter v1.12.13+hotfix.8 升级到1.22.4(当前最新) 后 ,旧项目的适配过程 工具:Android Studio 4.1.1 1.android 的MainAct ...