Question

我正在我的网页上运行HTML5视频，并且我希望根据浏览器的大小按比例调整边缘到边缘的大小。它将被设置为页面上很少的背景。

为了掩盖我的屁股，我正在使用VideoJS来播放视频并处理向后兼容性。内置于库中的全屏功能运行良好，但触发了浏览器的原生全屏功能。在某些浏览器中，这意味着黑条，在Safari中它意味着完全独立于浏览器窗口的全屏。我不想要其中任何一个。

http://videojs.com/

理想情况下，它会像Supersized一样对图像起作用。图像始终设置为页面的整个宽度，高度从那里朝向CENTER裁剪。当您调整页面的大小越来越小时，它会达到最小高度并开始向中心裁剪宽度。

http://lara.fm/

我的JavaScript知识很少，但我能够捅戳并捅出来解决问题。我认为在VideoJS库之后放入Supersized大小调整脚本并强制它们处理video标签会以某种方式工作..至少是一个起点，但它不起作用。

有人可以帮助我了解哪些功能可以调整页面宽度，高度比例，以及在某个宽度或高度朝中心裁剪？这是我到目前为止所得到的：

http://kzmnt.com/test/

这是一个tuffie，我知道。非常感谢你。

Answer 1

您可以尝试以下操作（根据您发布的演示）

.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>

复制 - 将上述代码粘贴到新文件并测试它：）

MAJOR EDIT 2：我重构了我的代码，并以更面向对象的形式打包它。现在它确实移动（修改了顶部和左侧css属性），以便在屏幕比例改变时视频保持居中。它仍然做了一个奇怪的小跳，但它运作良好。我将继续努力完成这项任务，因为我认为这是一个很酷的功能。此外，我不知道在闪回后备期间会发生什么或者您希望发生什么。

PS。我保持点击我按钮，但很容易禁用它。

Answer 2

看起来你的问题已经得到了或多或少的回答，但是对于那些寻找快速而肮脏的方法来解决这个问题的人来说，我只是拆开了“jQuery Easy Background Resize Plug-In”并使其工作视频。满容易。

Html看起来像这样：

<div id="video-container">
  <video autoplay="autoplay" id="video">
    <source src="/videos/11280741.mp4" type="video/mp4" />
  </video>
</div>

Javascript看起来像这样（向视频特定的东西看底部）

/******************************************************
    * 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);

边缘到边缘的html5视频

2 个答案: