当前位置： 文江博客话题详情

边到边 html5 视频

发布于 2024-11-15 23:50:02 字数 760 浏览 1 评论 0原文

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

为了掩饰我的屁股，我使用 VideoJS 来播放视频并处理向后兼容性。库中内置的全屏功能运行良好，但会触发浏览器的本机全屏功能。在某些浏览器中，这意味着黑条，在 Safari 中，这意味着独立于浏览器窗口的字面全屏。这两个我都不想要。

http://videojs.com/

理想情况下，它的功能就像 Supersized 处理图像一样。图像始终设置为页面的整个宽度，并且高度从那里向中心裁剪。当您将页面大小调整得越来越小时，它会达到最小高度并开始向中心裁剪宽度。

http://lara.fm/

我的 JavaScript 知识很少，但我能够戳戳和刺激来弄清楚事情出去。我认为在 VideoJS 库之后放入 Supersized 调整大小脚本并强制它们在 video 标签上工作会以某种方式起作用......至少是一个起始位置，但它不起作用。

有人可以帮助我了解什么功能可以调整页面的宽度、比例的高度以及以一定的宽度或高度向中心裁剪吗？这是我到目前为止所得到的：

http://kzmnt.com/test/

这是一个凝灰岩，我知道。太感谢了。

原文

I'm running an HTML5 video on my page and I'd like to make it resize edge to edge in ratio based on the browser's size. It will be set as a background with very little on the page.

To cover my ass, I'm using VideoJS to play the video and handle backwards compatibility. The fullscreen function built into the library works well, but is triggering the browser's native fullscreen function. In some browsers this means black bars, in Safari it means literally fullscreen independent of the browser window. I don't want either of these.

http://videojs.com/

Ideally, it would function like Supersized does for images. The image is always set to the full width of the page, and height is cropped towards the CENTER from there. As you resize the page smaller and smaller, it hits a min-height and begins cropping the width towards the center.

http://lara.fm/

My JavaScript knowledge is minimal, but I'm able to poke and prod to figure things out. I figured that dropping in the Supersized resizing scripts after the VideoJS library and forcing them to work on video tags would work in some way.. at least a starting place, but it didn't work.

Can someone help me understand what function can adjust width to the page, height in ratio, and crop towards the center at a certain width or height? Here's what I've got so far:

http://kzmnt.com/test/

This is a tuffie, I know. Thank you SO much.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

狼性发作 2024-11-22 23:50:02

您可以尝试以下操作（基于您发布的演示）

.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 属性），以便在屏幕比例发生变化时视频保持居中。它仍然会产生奇怪的小跳跃，但效果很好。
我将继续致力于这项任务，因为我认为这是一个很酷的功能。另外，我不知道在闪退期间会发生什么或您希望发生什么。

附：我保留了“单击我”按钮，但禁用它很容易。

You can try the following, (based on the demo you posted)

.video-js-box.fullScreen{
    width: 100% !important;
    position: relative;
    background: black;
}
.fullScreen .video-js{
    height: 100% !important;
    margin: 0 auto;
    display: block;
}

add the class .fullScreen at the video-js-box and see what happens.

I am trying to achieve the effect you described above, and I 'll let you know as soon as I find a better solution.

EDIT: Ok I think I found a solution - (VERSION 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>

Copy - paste the above code to a new file and test it : )

MAJOR EDIT 2: I refactored my code, and packaged it in a more object oriented form. Now it does move (modified top and left css attributes) so that the video remains centered when the screen ratio changes. It still does a weird little jump but it works quite well.
I will keep working on this task because I think it's a cool feature. Also I have no idea what happens or what would you like to happen during the flash fallback.

ps. I kept the click me button but it is very easy to disable it.

回复 原文
遗弃Ｍ 2024-11-22 23:50:02

看起来你的问题或多或少已经得到了回答，但对于其他正在寻找一种快速而肮脏的方法来处理这个问题的人来说，我只是拆开了“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);

It looks like you're question has been answered, more or less, but for others looking for a quick and dirty way to handle this, I just pulled apart "jQuery Easy Background Resize Plug-In" and made it work for video. Pretty easy.

Html looks like this:

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

Javascript looks like this (look towards the bottom for the video specific stuff)

/******************************************************
    * 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);
回复 原文
~没有更多了~

关于作者

oО清风挽发oО

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Gabu-gabumon

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

荔枝明

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

独守阴晴ぅ圆缺

文章 0 评论 0

¤→小豸慧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文