【前端】html5 video标签 自适应
我需要在调整浏览器窗口的时候 可以让视频适应窗口的大小.
网上找了个css3属性object-fit, 这个倒是很牛逼,可是兼容性太差了.
或者只能想办法, 计算窗口的比例, 然后根据视频的比例, 判断下, 重新计算video的宽高?
求指教…
回答
一般是不写height值，让他等比适应宽度的100%，也就是
<video src=”https://segmentfault.com/q/1010000012431653/movie.mp4″ width=”100%” controls=”controls”>
Your browser does not support the video tag.
</video>
不太明白你的意思，你想要的效果是浏览器窗口多大，视频就显示多大吗？
<video width="100%" height="100%" autoplay src="https://segmentfault.com/q/1010000012431653/ds.mp4"></video>
用百分比布局就行了，如果想要全屏自适应，QQ靓号出售地图直接body宽高设置为100%，然后让video继承body的宽高。这时候就算窗口如何缩放，video始终显示的是整个浏览器窗口的大小。
网上找了个 假如视频比例是4比3, 可以父盒100%宽, 按照比例padding-bottom. 然后在设置vedio宽高100%.
自适应窗口如果不考虑竖屏 而且要消除视频黑边 （屏幕比例与视频比例不一致会出现）
那么给视频容器高度一个满屏的设置 然后
把视频弄成绝对定位，
高度100%
宽度（重点：calc(100vh / 0.562)）<–此方法能让视频永远保持16：9
top0；
left50%;
transform: translateX(-50%);
只需要控制宽就行了 width=”80%” 类似这样，高度会随着宽度自适应变化的~
可以试试这个css属性：object-fit
更多相关文章
- 【前端】在苹果safari浏览器上video标签无法正常播放视频
- window.parent、window.top、window.self
- 自学WEB前端
- 抖音用户评论和ID的采集方法
- 给大家分享一个一键采集哔哩哔哩短视频素材的软件
- “新内容 新交互”全球视频云创新挑战赛复赛启幕
- 视频剪辑必备技能：给小视频增加滚动字幕
- 情感类短视频怎么样吸粉是最快的？
- H.264播放器在视频播放时报错Mixed Content的问题排查与解决