w3c html5 video,【前端】html5 video标签 自适应

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

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

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

求指教…

回答

一般是不写height值，让他等比适应宽度的100%，也就是

Your browser does not support the video tag.

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

用百分比布局就行了，如果想要全屏自适应，直接body宽高设置为100%，然后让video继承body的宽高。

这时候就算窗口如何缩放，video始终显示的是整个浏览器窗口的大小。

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

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

那么给视频容器高度一个满屏的设置 然后

把视频弄成绝对定位，

高度100%

宽度(重点：calc(100vh / 0.562))

top0；

left50%;

transform: translateX(-50%);

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

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