如这种情况：

微信可谓是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. [日常摸鱼]bzoj1001狼抓兔子-最大流最小割

    题意就是求最小割- 然后我们有这么一个定理(最大流-最小割定理 ): 任何一个网络图的最小割中边的容量之和等于图的最大流. (下面直接简称为最大流和最小割) 证明: 如果最大流>最小割,那把这些 ...

  2. Shell-sed之替换字符

    将A_B_C_D_TXT 修改为 A.B_C_D.TXT echo "A_B_C_D_TXT"|sed 's/_/./1;s/_/./3' 注:后面的数字代表匹配的次数, 1表示第 ...

  3. YZMCMS V5.3后台 SSRF

    当改变命运的时刻降临,犹豫就会败北. 前言 此前在测试过程中遇到过此CMS,久攻不下,于是便尝试代码审计,不得不说这套CMS还是挺安全的,读起来也简单,也适合初学代码审计的同学去阅读,不过漏洞真的不多 ...

  4. kali没有tcptraceroute如何安装

    问题描述 尝试使用kali进行路由信息的收集,发现kali没有自带tcptraceroute.在网上搜索教程发现都是Linux下安装,且都是使用yum安装,看了一下发现kali用的也不是yum 这就很 ...

  5. XCTF EasyHook

    无壳,使用IDA直接分析主函数 逻辑很简单,问题的关键是Hook,题目也是EasyHook, 会发现在生成文件后,文件内容是被加密后的,那就怀疑加密函数参与Hook 动态调试一步步来看,先进入4012 ...

  6. 出现VMware Workstation 无法连接到虚拟机。请确保您有权运行该程序、访问该程序使用的所有目录以及访问所有临时文件目录。 未能将管道连接到虚拟机: 所有的管道范例都在使用中。

    今天在学习Linux 的时候 启动VM时出现了这个问题, 搞了很久终于弄好了, 就写篇博客来记录一下,帮助一下大家,如果对大家有帮助,还请大哥大姐点个关注,你的支持就是我坚持下去的动力 ! VMwar ...

  7. 小白都能理解的Python多继承

    本文主要做科普用,在真实编程中不建议使用多重继承,或者少用多重继承,避免使代码难以理解. 方法解析顺序(MRO) 关于多重继承,比较重要的是它的方法解析顺序(可以理解为类的搜索顺序),即MRO.这个跟 ...

  8. MSSQL数据库一对多和多对一查询的转换

    前言 处理一对多关系,有两种方式 (1)创建关系表,将对应关系保存在物理表中. (2)表中添加一个字段,将多关系的值以特殊符号隔开进行保存. 本例使用的就是,以逗号隔开(InterestID='1,2 ...

  9. C#脚本引擎CS-Script

    最近想要在程序中嵌入一个C#脚本引擎,在.NET Framework时代用过一个叫做CS-Script的东西,感觉还是不错,发现现在也支持.NET Core了,试着嵌入一下. 比较 要说能够运行C#脚 ...

  10. Spring Boot使用Maven自定义打包方式

    前言:本文将告诉你如何将程序Jar与与依赖Jar及配置文件分离打包,以下列举了两种不同Maven打包方式,其打包效果一致! 一.第一种Maven打包方式,将jar及resources下全部配置文件,拷 ...