一、csss设置
html:
<div class="wrap">
<video controls="controls" class="videoBox" #iframeurl>
<source src="3a1be272f8b.mp4" type="video/mp4" />
</video>
</div>
css:
.wrap{
width:100%;
position:relative;
padding-bottom:62%; /*需要用padding来维持16:9比例,也就是9除以16*/
height: 0;
video{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%
}
}
JS的方法:
思路:用js获取到当前video的DOM,再对DOM进行动态的宽高设置
以下是以angular的例子展示,在纯JS里面也是一样的道理
html:
<video controls="controls" class="videoBox" #iframeurl>
<source src="a1be272f8b.mp4" type="video/mp4" />
</video>
TS:
获取DOM的方法
@ViewChild('iframeurl') iframeurl:ElementRef;
let iwidth = screen.width;
let iheight = iwidth*0.62;
console.log(iheight+"高度"+iwidth);
this.iframeurl.nativeElement.style.width = iwidth+"px";
this.iframeurl.nativeElement.style.height = iheight+"px";