曾几何时，项目中有视频尺度拉伸的需求，但我发现这个看似普通的需求，我找遍了全网也没有找到解决方案。因为强制给视频标签设置宽度和高度只会拉伸视频的显示区域，但是里面的视频还是保持原来的比例，所以调整也没用：

因为当我横向拉伸时：

当我纵向拉伸时：

2016-09-21 11:15336040更新：

感谢@RileyRen提醒我，还是有适合对象的属性。如果设定为填满，需求就会得到满足，眼泪就会流下来。这篇文章应该算是一个笑话，唉，但是我们可以看到我的猫的登场。

style video { object-fit : fill；宽度width:800px高度：320 px；}/styleh1测试视频缩放：/h1视频src=' http:33587xnzpx.com1.z0.glb.clouddn.com/miaoxingren _ 360 p . MP4 '控制自动播放循环/视频。但是这个属性的兼容性不是很好，IE全军覆没，安卓需要在4.4.3以上支持。

所以我的方法有点价值，哈哈。

解决方案1

有人会说，既然尺度在网页上是拉伸不了的，那为什么不直接用转码工具拉伸视频，然后再转码呢？

是的，这是我说的第一个解决方案，但是对于少量的视频来说是没有问题的。如果视频很多，全部转码后再上传是不现实的。一开始我是这么做的，但后来我发现还有其他方法。

解决方案2

如题，变换是用来实现视频尺度拉伸的。在两种情况下，纵横比增加，纵横比减小。

完整的演示文稿

我们先来看一个完整的DEMO。视频的主角是我的猫星。阿苗说：哦，我要露脸了，好害羞~ ~ ~

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

纵横比变得更大

保持宽度不变，调整rotateX降低高度，即增加宽高比。请看下图：

例如，如果原始视频分辨率是640*320(16:9)，我想调整为1633607，即640*280，那么：

Cos =新高度/旧高度=280/360

用js计算角度(单位为度):

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

纵横比变得更小

当纵横比减小时，可以通过基于高度调整rotateY来减小宽度，即纵横比变小。

例如，如果原始视频分辨率为640*320(16:9)，我想将其调整为4:3，即480*320，那么：

Cos =新宽度/旧宽度=480/640

用js计算角度(单位为度):

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

摘要

综上所述，有了这两种方法，可以实现任意比例的视频拉伸，但需要注意变形时可能出现的位置变化。

附上

附上在前面演示中选择的演示：

！doctype html lang=' zh ' head metacarset=' utf-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0' title旋转比例模拟/title styletype=' text/CSS '。内容{位置：绝对；宽度： 400 px；height: 300px-web kit-perspective : 400 px；透视图400pxleft: 100pxtop: 100px}.包装器{ position:绝对值；宽度： 320 px；高度： 240 px；transform : Rotatey(-30 deg)Rotatex(0 deg)；border:固体2px # 000} . wrapper . rotate { transform : rotateY(-30 deg)rotateX(50 deg)；}。display:块；绝对位置：宽度： 400 px；left :-40px；top: 120pxheight: 2px背景：黑色；}.包装img { width : 100%；高度： 100%；}/style/head body div class=' content ' div class=' wrapper ' img src=' http :http://test . Lixian an.com/sample . jpg '/div class=' wrapper rotate ' img src=' http :http://test . Lixian.com/sample . jpg '/div/body/html