61,114
社区成员
发帖
与我相关
我的任务
分享求IE下 video 自由拉伸代码
chrome 、firefox可使用样式object-fit:fill;来实现自由拉伸，但这个属性在IE及Edge下不支持。求解决方法。
...全文
请发表友善的回复…
发表回复
oicuivu 2016-11-05
- 打赏
- 举报
没有直接的解决方法，最后是通过js修改transform scale(x,y)来实现，贴一下代码：
[code=javascript][/
//调整视频大小，IE兼容
function resetVideoSize(area){
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 器
var isIE = userAgent.indexOf("Trident") > -1; //判断是否IE浏览器
if(isIE){
$(area).find("div.node > video.video").each(function(index, element) {
var actualRatio = $(element)[0].videoWidth/$(element)[0].videoHeight;
var targetRatio = $(area).width()/$(area).height();
var scaleX = 1;
var scaleY = 1;
if(actualRatio < targetRatio){
scaleX = targetRatio / actualRatio;
}else{
scaleY = actualRatio / targetRatio;
}
$(element).css({"transform":"scale(" + scaleX + "," + scaleY + ")"});
});
}
}
code]
