edge to edge html5 video

2023-03-13 09:11 问答作者：

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 fullscr开发者_JAVA百科een 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.

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.

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

继续阅读：fullscreen javascript video

edge to edge html5 video

更多精彩内容

精彩评论

最新问答

海信ULED电视画质有什么不同的地方?？

钉子可以挂的住画框幕布吗？

哪里医院专治输卵管堵塞好？

外语基础薄弱的人出国自由行，带哪种翻译器比较好？？

输卵管积液手术价格？

问答排行榜

王昌瑞《潜梦追凶》剧组庆生新锐演员未来可期？

Is it allowed to ask users to enter credit card details for own payment method?

Escaping "<" in Perl-generated XML

imessage会显示已读吗？

微信重新建群怎么建？