使用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

看来你只能在这里指定默认的视频宽度和高度：

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