我正在页面上运行HTML5视频，我想根据浏览器的大小按比例调整其大小。它将被设置为背景，页面上的内容很少。
为了掩盖我的屁股，我正在使用VideoJS播放视频并处理向后兼容性。库中内置的全屏功能运行良好，但是会触发浏览器的本机全屏功能。在某些浏览器中，这意味着黑条，而在Safari中，这意味着其在全屏状态下独立于浏览器窗口。我什么都不想要。
http://videojs.com/
理想情况下，它的功能类似于Supersized用于图像的功能。图像始终设置为页面的整个宽度，并且高度从此处朝向CENTER裁剪。当您调整页面的尺寸时，它会达到最小高度，并开始向中心裁剪宽度。
http://lara.fm/
我的JavaScript知识很少，但是我可以戳并尝试解决问题。我认为在VideoJS库之后放入Supersized调整大小脚本，并迫使它们在video标签上工作会以某种方式起作用。
有人可以帮助我了解什么功能可以调整页面的宽度，比例调整的高度，并以一定的宽度或高度向中心裁剪吗？到目前为止，这是我得到的：
http://kzmnt.com/test/
我知道这是一个凝灰岩。非常感谢。
最佳答案
您可以尝试以下方法（基于您发布的演示）
.video-js-box.fullScreen{
width: 100% !important;
position: relative;
background: black;
}
.fullScreen .video-js{
height: 100% !important;
margin: 0 auto;
display: block;
}
在video-js-box上添加.fullScreen类，然后看看会发生什么。
我正在努力实现上述效果，一旦找到更好的解决方案，我将立即通知您。
编辑：好的，我认为我找到了解决方案-（版本2）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Video Player</title>
<!-- Include the VideoJS Library -->
<script src="http://kzmnt.com/test/video.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
VideoJS.setupAllWhenReady();
</script>
<!-- Include the VideoJS Stylesheet -->
<link rel="stylesheet" href="http://videojs.com/video-js/video-js.css?v=1292015834" type="text/css" media="screen" title="Video JS">
<style>
body{margin:0;}
.video-js-box.fullScreen{
width: 100% !important;
min-width: 380px !important;
min-height: 280px !important;
position: relative;
background: #eeeeee;
position:absolute;
overflow: hidden;
top:0;
left:0;
height:100% !important;
z-index:998;
}
.fullScreen .video-js{
height:auto;
/*height: 100% !important;
width:100% !important;*/
width:100%;
top:0;
left:0;
margin: 0 auto;
display: block;
}
.video-js-box{
width:400px;
height:auto;
}
.video-js-box video{
width:400px;
height:auto;
}
#buttonImportant{
position:fixed;
top:0;
right:0;
width:100px;
height:100px;
border-radius:8px;
background:#eeeeee;
font-size:1.3em;
z-index:999;
}
</style>
</head>
<body>
<div id="buttonImportant"> CLICK ME!!! </div>
<div class="video-js-box" id="videoContainer">
<video class="video-js" preload loop fullscreen autoplay>
<source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="1280" height="720" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars"
value='config={"playlist":["http://kzmnt.com/test/vid/kozmonaut_by_christina_tan.png", {"url": "../vid/kozmonaut_by_christina_tan.mp4","autoPlay":true,"autoBuffering":true}]}' />
</object>
</video>
</div>
<script type="text/javascript">
var clicked = document.getElementById("buttonImportant")
var videoContainer = document.getElementById('videoContainer');
var video = videoContainer.getElementsByTagName('video')[0];
video.style.height="auto";
video.style.width="400px";
clicked.addEventListener('click',function(){
if( videoContainer.className.lastIndexOf("fullScreen")>=0 ){
videoContainer.className="video-js-box";
video.style.height = "";
video.style.width="";
}
else
{
videoContainer.className="video-js-box fullScreen";
video.style.height = "";
video.style.width="";
}
myResizerObject.prevWidth = video.offsetWidth;
myResizerObject.prevHeight = video.offsetHeight;
myResizerObject.Init();
},false);
var RESIZER = function(){
this.prevWidth = video.offsetWidth;
this.prevHeight = video.offsetHeight;
this.videoContainer = document.getElementById('videoContainer');
this.video = videoContainer.getElementsByTagName('video')[0];
this.videoStyle = this.video.style;
var ratio = this.video.offsetHeight/this.video.offsetWidth;
var that = this;
this.Init = function(){
if( that.videoContainer.className.lastIndexOf("fullScreen")>=0 )
{
var videoContOffsetWidth = that.videoContainer.offsetWidth;
var videoOffsetWidth = that.video.offsetWidth;
var videoContOffsetHeight = that.videoContainer.offsetHeight;
var videoOffsetHeight = that.video.offsetHeight;
if(that.prevWidth!= videoContOffsetWidth)
{
that.prevWidth = videoContOffsetWidth;
var desired = videoContainer.offsetHeight/videoContainer.offsetWidth;
if(desired>ratio){
that.videoStyle.width=videoContOffsetWidth*desired+videoContOffsetWidth*desired+"px";
that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
}
else{
that.videoStyle.cssText="height:auto;width:100%;left:0px;top:0px;";
}
}
if(that.prevHeight!=videoContOffsetHeight)
{
that.prevHeight = videoContOffsetHeight;
var desired = videoContOffsetHeight/videoContOffsetWidth;
if(desired>ratio){ console.log(ratio);
that.videoStyle.top = '0px';
that.videoStyle.left = -1*(videoOffsetWidth-videoContOffsetWidth)/2+'px';
that.videoStyle.width = videoContOffsetHeight*desired+videoContOffsetHeight/desired+'px';
}
else
{
that.videoStyle.top = -1*(videoOffsetHeight-videoContOffsetHeight)/2+'px';
}
}
}
};
};
var myResizerObject = new RESIZER();
window.onresize = myResizerObject.Init;
</script>
</body>
</html>
复制-将上面的代码粘贴到新文件中并进行测试：）
主要编辑2：我重构了我的代码，并将其打包为面向对象的形式。现在它确实移动了（修改了顶部和左侧的css属性），以便在屏幕比例改变时视频保持居中。它仍然做了一个怪异的小跳跃，但是效果很好。
我将继续从事这项工作，因为我认为这是一项很酷的功能。另外，我也不知道在Flash回退期间会发生什么或您想发生什么。
ps。我保留了“单击我”按钮，但是禁用它很容易。