如这种情况:

微信可谓是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. c预处理和宏

    文件的预处理 #include "xxx.h" 1 首先查找当前源文件所在的路径 2 查找工程的头文件搜索路径 #include <xxxx.h> 查找工程的头文件搜索 ...

  2. 用DirectX 11绘制一个Cube

    之前一篇文章讲了如何初始化DirectX 11,现在在此基础上绘制一个Cube,总体可概括为以下几个步骤: 定义Cube顶点数据结构 创建Vertex Buffer和Index Buffer 编写应用 ...

  3. mini-web框架-装饰器-总结1(5.3.1)

    @ 目录 1.说明 2.代码 关于作者 1.说明 原则:开放封闭 可以扩展,但是不可以修改.也就是说软件对扩展开放,对修改关闭. 运用技术:闭包 一共两种方法,一个使用闭包,一个使用类 使用多个装饰器 ...

  4. java_day03

    一.this关键字的作用 昨天学了Java private 关键字 ,private关键字主要是为了 保护变量 ,感觉用着好像并不是特别方便 如果需要访问本类当中的成员变量,需要使用的格式: this ...

  5. PHP文件包含及使用伪协议getshell

    file:// - 访问本地文件系统 http:// - 访问 HTTP(s) 网址 ftp:// - 访问 FTP(s) URLs php:// - 访问各个输入/输出流(I/O streams) ...

  6. IIS放置的APP安装包在浏览器无法打开

    无法打开的提示   操作步骤 1.将APP安装包放置到指定的文件夹中. 2.在IIS中MIME中添加MIME类型 扩展名:.apk MIME类型:application/vnd.android.pac ...

  7. 《单元测试之道》Java版学习日志

    在软件工程这门课程中,首先谈单元测试的概念,单元测试是开发者编写的一小段代码,用于检验被测代码的一个很小的.很明确的功能是否正确.通常而言,一个单元测试是用于判断某个特定条件或某个特定函数的行为.我们 ...

  8. pathon基础2

    支持不同文件,不同sheet页 import xlrdimport xlwtimport osimport time; #往日志文件中追加内容函数def writeLogfile(filename,c ...

  9. JavaSwing 船只停靠管理可视化(一)

    最近抽空闲时间做了船只停靠管理系统,先看一下效果. 停靠泊位管理:实现泊位的 增删改查. JavaSwing 船只停靠管理可视化(一) JavaSwing 船只停靠管理可视化(二) JavaSwing ...

  10. JavaDailyReports10_14

    1 package Test; 2 3 import java.util.Scanner; 4 5 public class Main { 6 7 public static void main(St ...