html5的video標(biāo)簽如何拉伸視頻，使其變形并且適配div寬高比例？

父集div使用relative定位，padding-bottom值充當(dāng)空間，子集video元素absolute定位

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)專家,致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營銷，專業(yè)領(lǐng)域包括做網(wǎng)站、網(wǎng)站建設(shè)、電商網(wǎng)站制作開發(fā)、成都微信小程序、微信營銷、系統(tǒng)平臺開發(fā)，與其他網(wǎng)站設(shè)計及系統(tǒng)開發(fā)公司不同，我們的整合解決方案結(jié)合了恒基網(wǎng)絡(luò)品牌建設(shè)經(jīng)驗和互聯(lián)網(wǎng)整合營銷的理念，并將策略和執(zhí)行緊密結(jié)合，且不斷評估并優(yōu)化我們的方案，為客戶提供全方位的互聯(lián)網(wǎng)品牌整合方案！

具體例子如下，比如視頻是16:9的比例，這樣比例就不會變了，并且適配div的等高比例

css

.vid-wrapper{

width:100%;

position:relative;

padding-bottom:56.25%;????/*需要用padding來維持16:9比例,也就是9除以16*/

height:?0;

}

.vid-wrapper?video{

position:?absolute;

top:0;

left:?0;

width:?100%;

height:?100%

}

html

div?class="vid-wrappper"

video?src=""/video

/div

HTML5的視頻能不能拉伸寬度，實現(xiàn)自適應(yīng)寬度？

曾幾何時，項目中有碰到視頻比例拉伸的需求，但是發(fā)現(xiàn)這個看似再普通不過的一個需求，找遍全網(wǎng)至今都沒有找到解決方法。因為強制給video標(biāo)簽設(shè)置width和height的話只會將video的顯示區(qū)域拉伸，但是里面的視頻還是保持原始比例，怎么調(diào)都沒用：

因為當(dāng)我橫向拉伸時：

當(dāng)我縱向拉伸時：

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

感謝 @RileyRen 提醒，原來還有object-fit這一屬性，把它設(shè)置為fill就滿足需求了，淚奔~，這篇文章就當(dāng)看個笑話吧，哎，不過可以看看我家喵星人的處女秀。

stylevideo {

object-fit:fill;

width:800px;

height:320px;}/styleh1測試視頻比例拉伸：/h1video src="" controls autoplay loop/video

但是，這一屬性兼容性不太好，IE全軍覆沒，安卓要4.4.3以上才支持：

所以我這個方法還是有一點點價值的，哈哈。

解決方法一

有人會說，既然網(wǎng)頁上拉伸不了比例，那么直接把視頻用轉(zhuǎn)碼工具拉伸比例然后重新轉(zhuǎn)碼不就是了？

沒錯，這就是我說的第一種解決方法，但是這對于少量視頻沒啥問題，如果有很多個視頻，全部轉(zhuǎn)碼又重新上傳也不太現(xiàn)實。剛開始我也確實是這么做的，但是后來發(fā)現(xiàn)還有其它方法。

解決方法二

就是標(biāo)題說的，借用transform來實現(xiàn)視頻比例拉伸。分2種情況，寬高比變大和寬高比變小。

3.1.?完整DEMO演示

先來看個完整的DEMO，視頻主角是我家的喵星人，阿喵說：哎呀，要露臉了，好害羞~~~

3.2.?寬高比變大

保持寬度不變，調(diào)整rotateX即可實現(xiàn)高度變小，也就是寬高比變大了。看下圖：

舉個例子，假如原始視頻分辨率是640*320（16:9），我想把它調(diào)成16:7，也就是640*280，那么：

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

用js計算角度（單位是deg）：

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

3.3.?寬高比變小

寬高比減小時，以高度為基準(zhǔn)，調(diào)整rotateY即可實現(xiàn)寬度變小，也就是寬高比變小了。

舉個例子，假如原始視頻分辨率是640*320（16:9），我想把它調(diào)成4:3，也就是480*320，那么：

cos θ = 新寬度 / 舊寬度 = 480 / 640

用js計算角度（單位是deg）：

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

總結(jié)

綜上，有了這2個方法就可以實現(xiàn)任意比例的視頻拉伸了，不過變形過程中需要注意位置可能發(fā)現(xiàn)的變化。

附

附上前面演示選擇的DEMO：

!DOCTYPE htmlhtml lang="zh"head

meta charset="utf-8"

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

title旋轉(zhuǎn)比例模擬/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;

HTML5實現(xiàn)圖片拖動，旋轉(zhuǎn)，放大，拉伸等特效后保存效果

可以設(shè)置cookie（可以加載一個cookie.min.js，使用起來非常方便）。就是當(dāng)?shù)谝淮芜M入頁面的時候，先去讀取該cookie，如果存在，說明之前已經(jīng)做了更改，把cookie值稍作處理就可以完成初始化了（記得當(dāng)初始化完成后刪除該cookie），如果cookie不存在說明還沒有做過更改。