我在我的页面上运行一个 HTML5 视频，我想让它根据浏览器的大小按比例调整边到边的大小。它将被设置为页面上很少的背景。
为了掩盖我的屁股，我正在使用 VideoJS 来播放视频并处理向后兼容性。库中内置的全屏功能运行良好，但会触发浏览器的 native 全屏功能。在某些浏览器中，这意味着黑条，在 Safari 中，它意味着独立于浏览器窗口的全屏显示。这两个我都不想要。
理想情况下，它的功能类似于 Supersized 对图像的作用。图像始终设置为页面的整个宽度，高度从那里向中心裁剪。当您将页面的大小调整得越来越小时，它会达到最小高度并开始向中心裁剪宽度。
我的 JavaScript 知识很少，但我能够通过戳戳和戳戳来解决问题。我认为在 VideoJS 库之后放入 Supersized 大小调整脚本并强制它们在 video 标签上工作会以某种方式起作用..至少是一个起点，但它没有起作用。
谁能帮我了解一下什么函数可以调整页面宽度、高度比例以及在一定宽度或高度处向中心裁剪？到目前为止，这是我得到的:
这是一个tuffie，我知道。非常感谢。
最佳答案
您可以尝试以下操作，(基于您发布的演示)
.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:我重构了我的代码，并将其打包为更加面向对象的形式。现在它确实移动了(修改了 top 和 left css 属性)，以便在屏幕比例发生变化时视频保持居中。它仍然有一个奇怪的小跳跃，但效果很好。 我将继续完成这项任务，因为我认为这是一个很酷的功能。我也不知道在闪存回退期间会发生什么或您想发生什么。
附言。我保留了点击我按钮，但很容易禁用它。
关于javascript - 边到边 html5 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6379544/