Question

尝试创建完整的浏览器html5视频效果，与此相同 http://css-tricks.com/perfect-full-page-background-image/

但有视频我读了这个帖子 Full-bleed background videos? 还有这个 Html5 Full screen video

这似乎是最好的解决方案，但使用jquery http://syddev.com/jquery.videoBG/ 但有没有jquery的傻瓜证明方法？

Answer 1

我知道这是一个老问题，但答案很简单。

只需使用此html5视频代码或其他内容：

<video id="videobackground" preload autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

然后应用此css：

#video_background { 
  position: absolute;
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden
}

最小高度和最小宽度将允许视频保持视频的宽高比，这通常是正常分辨率下任何普通浏览器的宽高比。任何多余的视频都会从页面侧面流出。

从我的网站上阅读更多内容：HTML视频背景教程 - 仅限HTML5和CSS！ http://kesilconsulting.com/web-designer-magazine/html-video-background-tutorial/#ixzz2O3BPNZE6

没有jquery的完整页面浏览器html5视频

1 个答案: