html5 video标签 自适应

0 0 html5 css
八零末愤青
八零末愤青

声望值:133 0人

2019-03-14 09:09:56 提问

关注 0关注

收藏 0收藏, 294浏览

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

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

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

求指教...

请先 登录 后评论

5个回答

  • ♣ 五 毛298声望 2018-09-25 09:25

    不太明白你的意思,你想要的效果是浏览器窗口多大,视频就显示多大吗? <video width="100%" height="100%" autoplay src="ds.mp4"></video> 用百分比布局就行了,如果想要全屏自适应,直接body宽高设置为100%,然后让video继承body的宽高。 这时候就算窗口如何缩放,video始终显示的是整个浏览器窗口的大小。
    请先 登录 后评论
  • 夏未央78声望 2018-09-25 09:26

    只需要控制宽就行了 width="80%" 类似这样,高度会随着宽度自适应变化的~
    请先 登录 后评论
  • SOC丶小兮123声望 2018-09-25 09:26

    网上找了个 假如视频比例是4比3, 可以父盒100%宽, 按照比例padding-bottom. 然后在设置vedio宽高100%.
    请先 登录 后评论
  • RAID丶小筑232声望 2018-09-25 09:26

    一般是不写height值,让他等比适应宽度的100%,也就是<video src="movie.mp4" width="100%" controls="controls">Your browser does not support the video tag.</video>
    请先 登录 后评论
  • 不想好好学习315声望 2018-09-25 09:27

    自适应窗口如果不考虑竖屏 而且要消除视频黑边 (屏幕比例与视频比例不一致会出现) 那么给视频容器高度一个满屏的设置 然后把视频弄成绝对定位,高度100% 宽度(重点:calc(100vh / 0.562))<--此方法能让视频永远保持16:9top0;left50%;transform: translateX(-50%);
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问