html5 video标签 自适应

荆棘鸟
  • 388

我需要在调整浏览器窗口的时候 可以让视频适应窗口的大小.

网上找了个css3属性object-fit, 这个倒是很牛逼,可是兼容性太差了.

或者只能想办法, 计算窗口的比例, 然后根据视频的比例, 判断下, 重新计算video的宽高?

求指教...

回复
阅读 33.6k
7 个回答

一般是不写height值,让他等比适应宽度的100%,也就是
<video src="movie.mp4" width="100%" controls="controls">
Your browser does not support the video tag.
</video>

不太明白你的意思,你想要的效果是浏览器窗口多大,视频就显示多大吗?

<video width="100%" height="100%" autoplay src="ds.mp4"></video>
  • 百分比布局就行了,如果想要全屏自适应,直接body宽高设置为100%,然后让video继承body的宽高。
  • 这时候就算窗口如何缩放,video始终显示的是整个浏览器窗口的大小。

网上找了个 假如视频比例是4比3, 可以父盒100%宽, 按照比例padding-bottom. 然后在设置vedio宽高100%.

自适应窗口如果不考虑竖屏 而且要消除视频黑边 (屏幕比例与视频比例不一致会出现)

那么给视频容器高度一个满屏的设置 然后
把视频弄成绝对定位,
高度100%
宽度(重点:calc(100vh / 0.562))<--此方法能让视频永远保持16:9
top0;
left50%;
transform: translateX(-50%);

试试这样,我是采用此方法的:

video{
   width:100%;
   height:auto;
}

只需要控制宽就行了 width="80%" 类似这样,高度会随着宽度自适应变化的~

宣传栏