Javascript 边到边html5视频
我正在我的页面上运行一个HTML5视频，我想让它根据浏览器的大小按比例调整边到边的大小。它将被设置为背景，页面上几乎没有任何内容 为了掩饰自己，我使用VideoJS播放视频并处理向后兼容性。库中内置的全屏功能运行良好，但会触发浏览器的本机全屏功能。在某些浏览器中，这意味着黑条，在Safari中，这意味着完全独立于浏览器窗口的全屏显示。这两个我都不要 理想情况下，它的功能将类似于图像的超大尺寸。图像始终设置为页面的全宽，并从那里向中间裁剪高度。当您将页面的大小越来越小时，页面会达到最小高度，并开始向中心裁剪宽度 我的JavaScript知识非常有限，但我能够通过戳戳和戳戳来解决问题。我想，在VideoJS库之后加入超大尺寸的脚本，并强制它们处理Javascript 边到边html5视频,javascript,html,video,fullscreen,Javascript,Html,Video,Fullscreen,我正在我的页面上运行一个HTML5视频，我想让它根据浏览器的大小按比例调整边到边的大小。它将被设置为背景，页面上几乎没有任何内容 为了掩饰自己，我使用VideoJS播放视频并处理向后兼容性。库中内置的全屏功能运行良好，但会触发浏览器的本机全屏功能。在某些浏览器中，这意味着黑条，在Safari中，这意味着完全独立于浏览器窗口的全屏显示。这两个我都不要 理想情况下，它的功能将类似于图像的超大尺寸。图像始终设置为页面的全宽，并从那里向中间裁剪高度。当您将页面的大小越来越小时，页面会达到最小高度，并开
video我知道，这是一块凝灰岩。非常感谢。您可以尝试以下内容（基于您发布的演示） 在视频js框中添加class.fullScreen，看看会发生什么 我正在努力达到您上面描述的效果，一旦找到更好的解决方案，我会尽快通知您 编辑：好的，我想我找到了一个解决方案-（版本2）
HTML5视频播放器
VideoJS.setupAllWhenReady（）；
正文{页边距：0；}
.video-js-box.fullScreen{
宽度：100%！重要；
最小宽度：380px！重要；
最小高度：280px！重要；
位置：相对位置；
背景：#eeeeee；
位置：绝对位置；
溢出：隐藏；
排名：0；
左：0；
身高：100%！重要；
z指数：998；
}
.fullScreen.video js{
高度：自动；
/*身高：100%！重要；
宽度：100%！重要*/
宽度：100%；
排名：0；
左：0；
保证金：0自动；
显示：块；
}
.视频js盒{
宽度：400px；
高度：自动；
}
.视频js盒视频{
宽度：400px；
高度：自动；
}
#重要的{
位置：固定；
排名：0；
右：0；
宽度：100px；
高度：100px；
边界半径：8px；
背景：#eeeeee；
字体大小：1.3em；
z指数：999；
}
点击我！！！
var clicked=document.getElementById（“buttonImportant”）
var videoContainer=document.getElementById（'videoContainer'）；
var video=videoContainer.getElementsByTagName（'video'）[0]；
video.style.height=“自动”；
video.style.width=“400px”；
clicked.addEventListener（'click'，function（）{
if（videoContainer.className.lastIndexOf（“全屏”）>=0）{
videoContainer.className=“videojsbox”；
video.style.height=“”；
video.style.width=“”；
}
其他的
{
videoContainer.className=“video js box全屏”；
video.style.height=“”；
video.style.width=“”；
}
MyResiZeroObject.prevWidth=video.offsetWidth；
MyResiZeroObject.prevHeight=video.offsetHeight；
myResizerObject.Init（）；
}，假）；
var RESIZER=函数（）{
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比率=this.video.offsetHeight/this.video.offsetWidth；
var=这个；
this.Init=函数（）{
如果（该.videoContainer.className.lastIndexOf（“全屏”）>=0）
{
var videoContOffsetWidth=that.videoContainer.offsetWidth；
var videoOffsetWidth=that.video.offsetWidth；
var videoContOffsetHeight=该.videoContainer.offsetHeight；
var videoOffsetHeight=that.video.offsetHeight；
如果（该.prevWidth！=videoContOffsetWidth）
{
即.prevWidth=videoContOffsetWidth；
所需变量=videoContainer.offsetHeight/videoContainer.offsetWidth；
如果（需要>比率）{
即.videoStyle.width=videoContOffsetWidth*所需+videoContOffsetWidth*所需+px；
that.videoStyle.left=-1*（videoOffsetWidth videoContOffsetWidth）/2+'px'；
}
否则{
that.videoStyle.cssText=“高度：自动；宽度：100%；左侧：0px；顶部：0px；”；
}
}
如果（that.prevHeight！=videocontofftheSight）
{
那.prevHeight=videocontoffthesight；
所需var=videoContOffsetHeight/videoContOffsetWidth；
if（所需>比率）{console.log（比率）；
that.videoStyle.top='0px'；
that.videoStyle.left=-1*（videoOffsetWidth videoContOffsetWidth）/2+'px'；
that.videoStyle.width=videoContOffsetHeight*所需+videoContOffsetHeight/所需+px'；
}
其他的
{
that.videoStyle.top=-1*（videoOffsetHeight-videoContoOffsetheight）/2+'px'；
}
}
}
};
};
var myResizerObject=new RESIZER（）；
window.onresize=myresizezerobject.Init；
.video-js-box.fullScreen{
width: 100% !important;
position: relative;
background: black;
}
.fullScreen .video-js{
height: 100% !important;
margin: 0 auto;
display: block;
}
<!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>
<div id="video-container">
<video autoplay="autoplay" id="video">
<source src="/videos/11280741.mp4" type="video/mp4" />
</video>
</div>
/******************************************************
* jQuery plug-in
* Easy Background Image Resizer
* Developed by J.P. Given (http://johnpatrickgiven.com)
* Useage: anyone so long as credit is left alone
******************************************************/
(function($) {
// Global Namespace
var jqez = {};
// Define the plugin
$.fn.ezBgResize = function(options) {
// Set global to obj passed
jqez = options;
// If img option is string convert to array.
// This is in preparation for accepting an slideshow of images.
if (!$.isArray(jqez.img)) {
var tmp_img = jqez.img;
jqez.img = [tmp_img]
}
$("<img/>").attr("src", jqez.img).load(function() {
jqez.width = this.width;
jqez.height = this.height;
// Create a unique div container
$("section#content").append('<div id="jq_ez_bg"></div>');
// Add the image to it.
$("#jq_ez_bg").html('<img src="' + jqez.img[0] + '" width="' + jqez.width + '" height="' + jqez.height + '" border="0">');
// First position object
$("#jq_ez_bg").css("visibility","hidden");
// Overflow set to hidden so scroll bars don't mess up image size.
$("body").css({
"overflow":"hidden"
});
resizeImage();
});
};
$(window).bind("resize", function() {
resizeImage();
});
// Actual resize function
function resizeImage() {
$("#jq_ez_bg").css({
"position":"fixed",
"top":"0px",
"left":"0px",
"z-index":"-1",
"overflow":"hidden",
"width":$(window).width() + "px",
"height":$(window).height() + "px",
"opacity" : jqez.opacity
});
// Image relative to its container
$("#jq_ez_bg").children('img').css("position", "relative");
// Resize the img object to the proper ratio of the window.
var iw = $("#jq_ez_bg").children('img').width();
var ih = $("#jq_ez_bg").children('img').height();
if ($(window).width() > $(window).height()) {
//console.log(iw, ih);
if (iw > ih) {
var fRatio = iw/ih;
$("#jq_ez_bg").children('img').css("width",$(window).width() + "px");
$("#jq_ez_bg").children('img').css("height",Math.round($(window).width() * (1/fRatio)));
var newIh = Math.round($(window).width() * (1/fRatio));
if(newIh < $(window).height()) {
var fRatio = ih/iw;
$("#jq_ez_bg").children('img').css("height",$(window).height());
$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children('img').css("height",$(window).height());
$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#jq_ez_bg").children('img').css("height",$(window).height());
$("#jq_ez_bg").children('img').css("width",Math.round($(window).height() * (1/fRatio)));
}
// Center the image
if (typeof(jqez.center) == 'undefined' || jqez.center) {
if ($("#jq_ez_bg").children('img').width() > $(window).width()) {
var this_left = ($("#jq_ez_bg").children('img').width() - $(window).width()) / 2;
$("#jq_ez_bg").children('img').css({
"top" : 0,
"left" : -this_left
});
}
if ($("#jq_ez_bg").children('img').height() > $(window).height()) {
var this_height = ($("#jq_ez_bg").children('img').height() - $(window).height()) / 2;
$("#jq_ez_bg").children('img').css({
"left" : 0,
"top" : -this_height
});
}
}
$("#jq_ez_bg").css({
"visibility" : "visible"
});
// Allow scrolling again
$("body").css({
"overflow":"auto"
});
$("#video-container").css({
"position":"fixed",
"top":"0px",
"left":"0px",
"z-index":"-1",
"overflow":"hidden",
"width":$(window).width() + "px",
"height":$(window).height() + "px",
"opacity" : jqez.opacity
});
$("#video-container").children('video').css("position", "relative");
var iw = $("#video-container").children('video').width();
var ih = $("#video-container").children('video').height();
if ($(window).width() > $(window).height()) {
//console.log(iw, ih);
if (iw > ih) {
var fRatio = iw/ih;
$("#video-container").children('video').css("width",$(window).width() + "px");
$("#video-container").children('video').css("height",Math.round($(window).width() * (1/fRatio)));
var newIh = Math.round($(window).width() * (1/fRatio));
if(newIh < $(window).height()) {
var fRatio = ih/iw;
$("#video-container").children('video').css("height",$(window).height());
$("#video-container").children('video').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#video-container").children('video').css("height",$(window).height());
$("#video-container").children('video').css("width",Math.round($(window).height() * (1/fRatio)));
}
} else {
var fRatio = ih/iw;
$("#video-container").children('video').css("height",$(window).height());
$("#video-container").children('video').css("width",Math.round($(window).height() * (1/fRatio)));
}
// Center the image
if (typeof(jqez.center) == 'undefined' || jqez.center) {
if ($("#video-container").children('video').width() > $(window).width()) {
var this_left = ($("#video-container").children('video').width() - $(window).width()) / 2;
$("#video-container").children('video').css({
"top" : 0,
"left" : -this_left
});
}
if ($("#video-container").children('video').height() > $(window).height()) {
var this_height = ($("#video-container").children('video').height() - $(window).height()) / 2;
$("#video-container").children('video').css({
"left" : 0,
"top" : -this_height
});
}
}
$("#video-container").css({
"visibility" : "visible"
});
}
})(jQuery);