前言

原文地址

曾几何时，项目中有碰到视频比例拉伸的需求，但是发现这个看似再普通不过的一个需求，找遍全网至今都没有找到解决方法。因为强制给video标签设置width和height的话只会将video的显示区域拉伸，但是里面的视频还是保持原始比例，怎么调都没用：

因为当我横向拉伸时：

当我纵向拉伸时：

2016-09-21 11:15:40 更新：

感谢 @RileyRen 提醒，原来还有object-fit这一属性，把它设置为fill就满足需求了，泪奔~，这篇文章就当看个笑话吧，哎，不过可以看看我家喵星人的处女秀。

<style>

video {

	object-fit:fill;

	width:800px;

	height:320px;

}

</style>

<h1>测试视频比例拉伸：</h1>

<video src="http://7xnzpx.com1.z0.glb.clouddn.com/miaoxingren_360p.mp4" controls autoplay loop></video>

但是，这一属性兼容性不太好，IE全军覆没，安卓要4.4.3以上才支持：

所以我这个方法还是有一点点价值的，哈哈。

解决方法一

有人会说，既然网页上拉伸不了比例，那么直接把视频用转码工具拉伸比例然后重新转码不就是了？

没错，这就是我说的第一种解决方法，但是这对于少量视频没啥问题，如果有很多个视频，全部转码又重新上传也不太现实。刚开始我也确实是这么做的，但是后来发现还有其它方法。

解决方法二

就是标题说的，借用transform来实现视频比例拉伸。分2种情况，宽高比变大和宽高比变小。

完整DEMO演示

先来看个完整的DEMO，视频主角是我家的喵星人，阿喵说：哎呀，要露脸了，好害羞~~~

http://demo.liuxianan.com/2016/01/09-html5-video-resize/

宽高比变大

保持宽度不变，调整rotateX即可实现高度变小，也就是宽高比变大了。看下图：

举个例子，假如原始视频分辨率是640*320（16:9），我想把它调成16:7，也就是640*280，那么：

cos θ = 新高度 / 旧高度 = 280 / 360

用js计算角度（单位是deg）：

var rotate = (Math.acos(280/360)*180/Math.PI).toFixed(2); // 新高度 / 旧高度

宽高比变小

宽高比减小时，以高度为基准，调整rotateY即可实现宽度变小，也就是宽高比变小了。

举个例子，假如原始视频分辨率是640*320（16:9），我想把它调成4:3，也就是480*320，那么：

cos θ = 新宽度 / 旧宽度 = 480 / 640

用js计算角度（单位是deg）：

var rotate = (Math.acos(480/640)*180/Math.PI).toFixed(2); // 新宽度 / 旧宽度

总结

综上，有了这2个方法就可以实现任意比例的视频拉伸了，不过变形过程中需要注意位置可能发现的变化。

附

附上前面演示选择的DEMO：

<!DOCTYPE html>

<html lang="zh">

<head>

	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>旋转比例模拟</title>

	<style type="text/css">

.content {

    position: absolute;

    width: 400px;

    height: 300px;

    -webkit-perspective: 400px;

    perspective: 400px;

    left: 100px;

    top: 100px;

}

.wrapper {

    position: absolute;

    width: 320px;

    height: 240px;

    transform: rotateY(-30deg) rotateX(0deg);

    border: solid 2px #000;

}

.wrapper.rotate{

    transform: rotateY(-30deg) rotateX(50deg);

}

.wrapper:after {

	content: '';

	display: block;

	position: absolute;

	width: 400px;

	left: -40px;

	top: 120px;

	height: 2px;

	background: black;

}

.wrapper img{

    width: 100%;

    height: 100%;

}

	</style>

</head>

<body>

	<div class="content">

		<div class="wrapper">

			<img src="http://test.liuxianan.com/sample.jpg"/>

		</div>

		<div class="wrapper rotate">

			<img src="http://test.liuxianan.com/sample.jpg"/>

		</div>

	</div>

</body>

</html>

巧用transform实现HTML5 video标签视频比例拉伸的更多相关文章

  1. html5 video标签屏蔽右键视频另存为的js代码-HTML5教程

    点评:html5 video标签本身有下载功能但是在video区域内,点击右键可以将“视频另存为”下面是屏蔽右键视频另存为的js代码,有此需求的朋友不要错过   做HTML5的video标签,本身我们 ...

  2. html5 video标签如何禁止视频下载

    html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

  3. Web视频播放 之 【HTML5 Video标签】

    一.说明 HTML5中引入了video标签用于方便的在浏览器中播放视频,不在需要对flashPlayer进行依赖,更加轻量级.但在浏览器兼容.视频协议支持方面还有一些需要注意的问题. 二.浏览器兼容 ...

  4. 如何禁止 iPhone Safari video标签视频自动全屏？

    最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签).如: <video id="post" autoplay ...

  5. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  6. 用HTML5 video标签插入视频，在谷歌浏览器上播放视频时，右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

  7. html5 video标签兼容性与自定义控件

    Video不兼容IE8及之前的版本和opera mini. 格式上MPEG4/H.264兼容大部分浏览器,除低版本Firefox和低版本opera,这些可以通过用ogg格式解决,而webm是一种开放. ...

  8. ie8及ie8以下支持html5 video标签

    html5media是一个很给力的JavaScript类库,它不依赖于任何JavaScript框架.使用了html5media之后,当浏览器不支持HTML5时,它将会自动切换成Flash模式的Flow ...

  9. HTML5 video 播放视频黑屏

    <video width="320" height="240" controls>        <source src="movi ...

随机推荐

  1. 图文介绍如何在Eclipse统计代码行数（转）

    使用Eclipse可以方便的统计工程或文件的代码行数,方法如下: 1.点击要统计的项目或许文件夹,在菜单栏点击Search,然后点击File... 2.选中正则表达式(Regular expressi ...

  2. android 查看当前正在运行的进程

    转载至 https://github.com/wenmingvs/AndroidProcess 因为Android5.0以上的权限封锁,无法直接获取正在运行的进程,此文总共介绍6中方法获取, 详细介绍 ...

  3. 盘点销售一体机 打印POS一体的设备。 打印，盘点，销售PDA（手持终端）+移动销售POS软件

    一.产品介绍 本产品为一个PDA(手持终端)+移动销售POS管理软件组合.可以实现功能如下: 可以实现移动销售(销售退货).盘点.配送.移库.打印小票的功能. 销售时,可以选择客户.业务员.库房,并且 ...

  4. BZOJ 3144 [Hnoi2013]切糕 ——网络流

    [题目分析] 网络流好题! 从割的方面来考虑问题往往会得到简化. 当割掉i,j,k时,必定附近的要割在k-D到k+D上. 所以只需要建两条inf的边来强制,如果割不掉强制范围内的时候,原来的边一定会换 ...

  5. div高度根据内容自动增大

    1.很多时候我们希望容器高度能够自适应内部元素的变化,需要用到min-height属性. 2.有时候用了min-height还是不会随着内容自适应高度,您需要检查下容器的子元素是不是有浮动属性,当子元 ...

  6. 原生JS 年月日、省市区 三级联动

    这个算生日日期,因为是从100年前的到现年. <select id="sel_year"></select> <select id="sel ...

  7. 忽略this的后果

    昨天在做一个简单的遮罩功能,说简单不如说是繁琐的好,主要是因为一个页面中有将近十几个,只不过是功能是一样的,要将一段文字遮盖住,文字的内容是不确定的,也就是跟着内容的高度变化而改变遮罩层的高度.了解了 ...

  8. BZOJ4596: [Shoi2016]黑暗前的幻想乡

    Description 四年一度的幻想乡大选开始了,最近幻想乡最大的问题是很多来历不明的妖 怪涌入了幻想乡,扰乱了幻想乡昔日的秩序.但是幻想乡的建制派妖怪(人类) 博丽灵梦和八云紫等人整日高谈所有妖怪 ...

  9. js get browser vertion (js获取浏览器信息版本)

    1问题:js get browser vertion (js获取浏览器信息版本) 2解决方案 Copy this script into your JavaScript files. It works ...

  10. linux（centos）下挂载ntfs文件系统

    在将硬盘插到Linux系统上,打开硬盘时一直提示:unknown filesystem type 'ntfs'.在尝试网上的方法也遇到了一些问题. 下面按照遇到的问题,按照正确的方式注意操作从而避免问 ...