响应式全屏 HTML5 视频问题
Responsive Fullscreen HTML5 Video Issue
我正在尝试实现全屏 html5 视频 splash/landing 页面,它在桌面浏览器上运行良好,但在视频下方留下黑色 bar/space。
问题是在较小的屏幕或移动设备上测试播放时,它破坏了响应能力并且无法显示海报图像。我确信这是一个相当简单的修复,但是,这是第一次使用 HTML5 视频。
使用以下 CSS:
video {
position: absolute;
z-index: 0;
width: 100%;
height: auto;
}
以及以下 HTML:
<video autoplay="" loop="" muted="" poster="img/poster.jpg">
<source src="video/energycrisis.mp4" type="video/mp4">
<source src="video/energycrisis.webm" type="video/webm">
<source src="video/energycrisis.ogg" type="video/ogg">
</video>
我试过将 CSS 更改为:
video {
position: absolute;
z-index: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}
CSS 视频完全覆盖了视口,这是我们想要的结果,但同样,它在桌面和响应式布局上都溢出了,进一步破坏了响应式布局。
如有任何帮助,我们将不胜感激。
感谢@sdcr 提供的信息,不幸的是它没有成功,你的 css 为我提供了类似的结果。
但是我找到了一个非常简单的修复方法!通常情况下,我已经花了几个小时,今天回到家后,我会在 5 分钟内用一杯茶解决它。
迄今为止最简单的方法,使用由 jQuery 代码组成的插件。
http://vodkabears.github.io/vide/
谢谢你的帮助,我希望这对其他人有用。
我正在尝试实现全屏 html5 视频 splash/landing 页面,它在桌面浏览器上运行良好,但在视频下方留下黑色 bar/space。
问题是在较小的屏幕或移动设备上测试播放时,它破坏了响应能力并且无法显示海报图像。我确信这是一个相当简单的修复,但是,这是第一次使用 HTML5 视频。
使用以下 CSS:
video {
position: absolute;
z-index: 0;
width: 100%;
height: auto;
}
以及以下 HTML:
<video autoplay="" loop="" muted="" poster="img/poster.jpg">
<source src="video/energycrisis.mp4" type="video/mp4">
<source src="video/energycrisis.webm" type="video/webm">
<source src="video/energycrisis.ogg" type="video/ogg">
</video>
我试过将 CSS 更改为:
video {
position: absolute;
z-index: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}
CSS 视频完全覆盖了视口,这是我们想要的结果,但同样,它在桌面和响应式布局上都溢出了,进一步破坏了响应式布局。
如有任何帮助,我们将不胜感激。
感谢@sdcr 提供的信息,不幸的是它没有成功,你的 css 为我提供了类似的结果。
但是我找到了一个非常简单的修复方法!通常情况下,我已经花了几个小时,今天回到家后,我会在 5 分钟内用一杯茶解决它。
迄今为止最简单的方法,使用由 jQuery 代码组成的插件。
http://vodkabears.github.io/vide/
谢谢你的帮助,我希望这对其他人有用。