html5 video标签 自适应

Question

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

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

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

求指教...

Answer 1

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

Answer 2

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

<video width="100%" height="100%" autoplay src="ds.mp4"></video>

• 用百分比布局就行了，如果想要全屏自适应，直接body宽高设置为100%，然后让video继承body的宽高。
• 这时候就算窗口如何缩放，video始终显示的是整个浏览器窗口的大小。

Answer 3

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

Answer 4

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

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

Answer 5

试试这样，我是采用此方法的：

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

Answer 6

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

Answer 7

可以试试这个css属性：object-fit