6

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

这是网站： 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/

任何想法以及如何使视频全尺寸而不在侧面或顶部/底部显示黑条？

4

4 回答 4

4

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

于 2013-01-08T17:57:18.410 回答
0

似乎您只能在此处指定默认视频宽度和高度：

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

于 2012-11-26T22:06:44.553 回答
0

You could use media queries to apply different CSS Classes depending upon the aspect ratio?

I'm using a widescreen laptop and can get the video to be full screen by using the following. 

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

video {
    width:100%;
}

For a portrait screen I can get it to fill the height by using the following. 

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

video {
width:auto !important;
}

So you could use the media queries like @media screen and (device-aspect-ratio: 16/9) to apply the different dimensions.

于 2012-11-26T23:37:44.720 回答
0

使用对象拟合。不要忘记为父 div 设置高度。

 .video-js {
    width: 100%;
    height: 100%;
  }
  .video-js .vjs-tech {
    object-fit: cover;
  }
于 2022-02-08T11:20:30.017 回答