动态设置video的宽高的方法，js设置和CSS设置

一、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";

动态设置video的宽高的方法，js设置和CSS设置相关推荐

js 设置video宽度_video设置视频的宽高
一般情况下但当设置video的宽高时,发现视频宽高并没有发生变化,因此设置 source的父元素宽高,让其填充video父元素.需要给video标签添加 style="width:100% ...
微信小程序view动态长度_微信小程序实现动态获取元素宽高的方法分析
本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuer ...
js设置canvas的宽高（动态设置canvas的宽高）
设置canvas的宽高有两种方式: 1:在html的canvas标签中设置宽高 <body><canvas id="canvas" width="300 ...
动态计算Label的宽高+文字设置
iOS7之后苹果推荐使用boundingRectWithSize:的方法来计算文字的宽高,使用这个方法就能动态计算文字的宽高,而不用自己去预算文字需要多宽多高下面,我们就具体看看这个方法如何使用: ...
js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）
js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法) 一.总结一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...
js动态设置元素的宽高
js动态设置元素的宽高实现代码: var html = document.getElementsByTagName('html')[0];var dl_second_nav=document.get ...
Unity 在代码中动态改变RectTransform位置及宽高的方法整理
原文链接(尊重原著):[100个 Unity实用技能] | Unity 在代码中动态改变RectTransform位置及宽高的方法整理_unity 修改recttransform_呆呆敲代码的小Y ...
动态修改RelativeLayout的宽高
我们经常会动态修改RelativeLayout的宽高,这样的代码,比较简单,就是修改Relativelayout的LayoutParams就可以．代码一般如下: RelativeLayout ss = ...
JS获取video真实宽高
JS获取video真实宽高 JS代码 var video = document.querySelector('video'); video.addEventListener('canplay', fu ...

动态设置video的宽高的方法，js设置和CSS设置

动态设置video的宽高的方法，js设置和CSS设置相关推荐

最新文章

热门文章