javascript 使用 video.js 的完整视频背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13573730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full video background using video.js
提问by codek
I'm trying to make a full screen video background that always shows the full size even on window resize.
我正在尝试制作一个全屏视频背景，即使在调整窗口大小时也始终显示完整尺寸。
here it's the site: http://webkunst.comeze.com/test/
这是网站：http: //webkunst.comeze.com/test/
this is the problem I have:
这是我遇到的问题：
on wide screen it shows like this: http://webkunst.comeze.com/test/wide.png
在宽屏上它显示如下：http: //webkunst.comeze.com/test/wide.png
and on vertical screen it shows like this: http://webkunst.comeze.com/test/vertical.png
在垂直屏幕上它显示如下：http: //webkunst.comeze.com/test/vertical.png
As you can see it always put some black bars to the video instead of resizing the video to the full of the screen.
如您所见，它总是在视频中放置一些黑条，而不是将视频大小调整到整个屏幕。
This is my markup:
这是我的标记：
<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>
with this css:
使用这个 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) */
}
I'm using the video.js plugin: http://videojs.com/
我正在使用 video.js 插件：http://videojs.com/
Any ideas and how to make the video full size without showing black bars on the side or top/bottom?
任何想法以及如何使视频全尺寸而不会在侧面或顶部/底部显示黑条？
回答by 0xDonut
Have you tried BigVideo.JS? It uses Video.JS as the core and builds on top of it. It only requires jQuery.
你试过BigVideo.JS吗？它以 Video.JS 为核心并在此基础上构建。它只需要jQuery。
回答by Gurpreet Singh
It seems like you can only specify the default video width and height here:
似乎您只能在此处指定默认视频宽度和高度：
http://videojs.com/tag-builder/
http://videojs.com/tag-builder/
but you can'tstretch the video itself to fill the different screen resolutions, it always maintains the aspect ratio.
但是您不能拉伸视频本身以填充不同的屏幕分辨率，它始终保持纵横比。
But instead of black bars you can specify color:
但是您可以指定颜色而不是黑条：
.vjs-default-skin .vjs-play-progress { background: #900; }
or Skin:
或皮肤：
<video class="video-js my-custom-skin" ...>
Source: https://github.com/zencoder/video-js/blob/master/docs/skins.md
来源：https: //github.com/zencoder/video-js/blob/master/docs/skins.md
回答by dev
You could use media queries to apply different CSS Classes depending upon the aspect ratio?
您可以使用媒体查询根据纵横比应用不同的 CSS 类吗？
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.
所以你可以使用媒体查询@media screen and (device-aspect-ratio: 16/9)来应用不同的维度。
