边缘到边缘的HTML5视频

我跑我的网页上的HTML5视频，我想使它调整边缘基于浏览器的大小比优势。它将在页面上设置为很少的背景。边缘到边缘的HTML5视频

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

http://videojs.com/

理想的情况下，其作用相当于超大型确实为图像。图像始终设置为页面的整个宽度，并从那里向CENTER剪切高度。当您调整页面的大小时，它会打到最小高度，然后开始向中心裁剪宽度。

http://lara.fm/

我的JavaScript知识是最小的，但我能故意拨弄理出头绪。我认为在VideoJS库之后放入超大尺寸的调整脚本并强制它们在video标记上工作会以某种方式工作..至少是一个起始位置，但它不起作用。

有人可以帮助我了解什么功能，可以在一定的宽度或高度调节宽度的页面，高度比和作物向中心？下面是我到目前为止有：

http://kzmnt.com/test/

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

来源

2011-06-16 technopeasant

你可以尝试以下方法，（根据您发布的演示）

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

在视频-JS-框中添加类.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属性），以便在屏幕比例更改时视频保持居中。它仍然有一个奇怪的小跳跃，但它工作得很好。我将继续致力于此任务，因为我认为这是一项很酷的功能。此外，我不知道在闪回过程中发生了什么或您希望发生什么。

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

来源

2011-06-16 23:12:07 Pantelis

@Pantelis - 并没有完全工作，我希望的方式。以下是我在想什么。使用javascript动态调整对象以适应不同的大小...将视频宽度设置为100％。理论上听起来..对吗？ – technopeasant 2011-06-17 00:00:03

是的，我明白你的意思。请再次检查，（在Chrome和ie9中测试它） – Pantelis 2011-06-17 01:58:45

@Pantelis。哇。只是..哇！你是国王之一。两个想法：1）在页面加载时触发全屏，而不必点击按钮2）朝向中心而不是左上角的水平裁剪（通过动态地将视频对中来解决）参见我的文章：http://stackoverflow.com/questions/6379979 /中心对象与 - 使用 - jQuery的可变宽度 – technopeasant 2011-06-17 02:23:08

它看起来像你的问题已经回答了，或多或少，但对于其他人寻找一个快速和肮脏的方式来处理这个问题，我只是拉开“jQuery的简单背景调整大小插件”，并使其工作视频。挺容易。

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

来源

2011-10-01 18:02:54

边缘到边缘的HTML5视频

回答

相关问题