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