邊緣到邊緣的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視頻

回答

相關問題