h5-video,视频在微信里变形、有黑边
如这种情况:
微信可谓是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,视频在微信里变形、有黑边的更多相关文章
- 视频H5のVideo标签在微信里的坑和技巧
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5 ...
- 【转】视频H5 video最佳实践
原文地址:https://github.com/gnipbao/iblog/issues/11 随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 ...
- video 标签在微信浏览器的问题解决方法
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题: 在微信浏览器内播放时,视频会自动全屏 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设 ...
- h5 的video视频控件
h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...
- H5 video自定义视频控件
1.自定义效果截图 2.效果源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- H5 video poster属性—设置视频封面
打开一个视频,在点击播放之前会看到一张封面图,点击之后封面消失,随即播放视频. 若现有一需求,要你自定义给某个视频设置封面,应该怎么做呢? 此时可使用H5 video提供的poster属性即 ...
- 黄聪:微信h5支付demo微信H5支付demo非微信浏览器支付demo微信wap支付
一.首先先确定H5支付权限已经申请! 二.开发流程 1.用户在商户侧完成下单,使用微信支付进行支付 2.由商户后台向微信支付发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB ...
- 亲历H5移动端游戏微信支付接入及那些坑(一)——支付方式与坑
最近项目进入中后期,开始接入支付.要求是使用微信支付,呵呵,好笑的是不知老板从哪里听来的,居然和我说只要是熟手,接个微信支付两小时搞定,我只能再次呵呵.先不说支付处理逻辑,而且公司本来也没现成的接入模 ...
- 如何将h5网页改成微信网页
1.如何将h5网页改成微信网页 1.设置安全域名 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. 备注:登录后可在“开发者中心”查看对 ...
随机推荐
- 精尽Spring MVC源码分析 - HandlerAdapter 组件(二)之 ServletInvocableHandlerMethod
该系列文档是本人在学习 Spring MVC 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释 Spring MVC 源码分析 GitHub 地址 进行阅读 Spring 版本:5.2. ...
- jenkins 配置任务
新建筑任务 ""imuke 建一个自由风格的 要执行python .py程序,我们需要把.py所在的目录设置进去 如果保存的是在svn,需要把他的地址放进去 如图: 设置自动构建时 ...
- centos8中的MySQL卸载和安装
centos8中的MySQL卸载和安装 前言 前几天在自己的服务器上安装了一个NDB集群[而且还没有成功] 放弃治疗后用一台没有mysql的服务器实现了单机版本的集群. 本来以为这事到这就结束了,结果 ...
- Mysql5.7.20安装手记
Mysql到5.7之后安装较之前有了很大的不同,特别是解压缩版,可能安装速度较之前有所减少,但对于我们这种一直使用5.5的我来说不知道步骤还真是挺费劲的.下面详细记一下我安装的过程. 1.下载mysq ...
- 渗透工具Burp Suite浅析
Burp suite是一款Web安全领域的跨平台工具,基于Java开发.它集成了很多用于发现常见Web漏洞的模块,如Proxy,Spider,Scanner,Intruder,Repeater等.所有 ...
- Windows 64位下安装Redis 以及 可视化工具Redis Desktop Manager的安装和使用
二.下载Windows版本的Redis 由于现在官网上只提供Linux版本的下载,所以我们只能在Github上下载Windows版本的Redis Windows版本的Redis下载地址:https:/ ...
- AES 逻辑
分组长度 加密逻辑 轮函数 参考:链接 字节代换 两种方法: 1.首先(将字节看做GF(28)上的元素,映射到自己的乘法逆元)换成人话就是(对多项式的逆,参考:链接): 其次,对字节做仿射变换 2 ...
- [leetcode]692. Top K Frequent Words频率最高的前K个单词
这个题的排序是用的PriorityQueue实现自动排列,优先队列用的是堆排序,堆排序请看:http://www.cnblogs.com/stAr-1/p/7569706.html 自定义了优先队列的 ...
- 收下这款 Vue 项目模版,它将让你的开发效率在 2021 年提高 50%
这是什么 vue-automation 是一款开箱即用的 Vue 项目模版,它基于 Vue CLI 4 众所周知,虽然 Vue CLI 提供了脚手架的功能,但由于官方的脚手架过于简单,运用在实际项目开 ...
- 任意文件上传——tcp
package chaoba; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; ...