使用video.js的全视频背景

Question

我正在尝试制作一个全屏视频背景，即使在调整窗口大小时也始终显示完整的大小。

这就是网站：http://webkunst.comeze.com/test/

这就是我的问题：

在宽屏上显示如下：http://webkunst.comeze.com/test/wide.png

在垂直屏幕上，它显示如下：http://webkunst.comeze.com/test/vertical.png

正如你所看到的，它总是在视频上放置一些黑条，而不是将视频调整到整个屏幕的大小。

这是我的标记：

           <div id="full-background">
                <video class="video-js vjs-fullscreen"  autoplay preload="auto"  poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
                    <source src="video/1.mp4" type='video/mp4' />
                </video>
            </div> 

使用此css：

#full-background {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}


.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  _position: absolute;
  /* IE6 Full-window (underscore hack) */

}

我使用的是video.js插件：http://videojs.com/

有什么想法和如何使视频全尺寸而不显示黑条在侧面或顶部/底部？

Answer 1

你试过BigVideo.JS吗？它使用Video.JS作为核心，并在此基础上构建。它只需要jQuery。

Answer 2

这里似乎只能指定默认的视频宽度和高度：

http://videojs.com/tag-builder/

但你不能拉伸视频本身来填充不同的屏幕分辨率，它总是保持宽高比。

但您可以指定颜色，而不是黑条：

.vjs-default-skin .vjs-play-progress { background: #900; }

或者皮肤：

<video class="video-js my-custom-skin" ...>

来源：https://github.com/zencoder/video-js/blob/master/docs/skins.md

Answer 3

您可以使用媒体查询来根据纵横比应用不同的CSS类？

我使用的是一台宽屏笔记本电脑，我可以使用以下命令将视频设置为全屏。

.video-js .vjs-tech {
width: 100% !important;
}

video {
    width:100%;
}

对于纵向屏幕，我可以使用以下命令让它填充高度。

.video-js .vjs-tech {
height:100% !important
}

video {
width:auto !important;
}

因此，您可以使用@media screen and (device-aspect-ratio: 16/9)之类的媒体查询来应用不同的维度。