HTML5ビデオスケールモード？

Question

私はフルスクリーンのHTML背景を作ろうとしていますが、これは簡単です。しかし、HTML5ビデオはアスペクト比を維持しながらコンテナに合わせてサイズが変更されるので、私は彼が望む効果を得ることができません。

HTML5ビデオにはさまざまなスケールモードがありますか？私は塗りつぶしと拡大縮小をしたいと思う。

これは、Flashで行わ望ましい効果です：あなたはそれがスケールとクロップ表示されますウィンドウのサイズを変更した場合 http://www.caviarcontent.com/

。あなたは決して黒い棒を得ません。

ありがとうございました！

Answer 1

同じ機能を使用してわかりましたI wrote about here

ページに要素がある場合、このjQueryリサイズ関数は、ビデオをブラウザウィンドウのフルブリードにスケールします。

browserHeightとbrowserWidth変数を変更することで、DIVに合わせてビデオを拡大することができます（オーバーフローするようにDIVを設定していることを確認してください：非表示）。

この機能は、ブラウザウィンドウでも動的にサイズが変更されます。

var sxsw = { 

    full_bleed: function(boxWidth, boxHeight, imgWidth, imgHeight) { 

     // Calculate new height and width... 
     var initW = imgWidth; 
     var initH = imgHeight; 
     var ratio = initH/initW; 

     imgWidth = boxWidth; 
     imgHeight = boxWidth * ratio; 

     // If the video is not the right height, then make it so...  
     if(imgHeight < boxHeight){ 
      imgHeight = boxHeight; 
      imgWidth = imgHeight/ratio; 
     } 

     // Return new size for video 
     return { 
      width: imgWidth, 
      height: imgHeight 
     }; 

    }, 

    init: function() { 
     var browserHeight = Math.round(jQuery(window).height()); 
     var browserWidth = Math.round(jQuery(window).width()); 
     var videoHeight = jQuery('video').height(); 
     var videoWidth = jQuery('video').width(); 

     var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight); 

     jQuery('video') 
      .width(new_size.width) 
      .height(new_size.height); 
    } 

}; 
jQuery(document).ready(function($) {  

    /* 
    * Full bleed background 
    */ 

    sxsw.init(); 

    $(window).resize(function() { 

     var browserHeight = Math.round($(window).height()); 
     var browserWidth = Math.round($(window).width()); 
     var videoHeight = $('.wd-thumb-list li a').eq(0).attr('data-wd-height'); 
     var videoWidth = $('.wd-thumb-list li a').eq(0).attr('data-wd-width'); 

     var new_size = sxsw.full_bleed(browserWidth, browserHeight, videoWidth, videoHeight); 

     $('video') 
      .width(new_size.width) 
      .height(new_size.height);   
    }); 

}); 

Answer 2

あなただけのCSSでこれを行うことができます。

video { 
    position: absolute; 
    min-width: 100%; 
    min-height: 100%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);   
} 

は明らかtransformプロパティを

ボーナスのために適切なベンダープレフィックスを使用します。画像でこれを行うには、「バックグラウンドを使用することができます-size：カバー; "

.background { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: url(background-image.jpg) center; 
    background-size: cover; 
} 

Answer 3

CSSでこれを行うもう1つの方法は、object-fitプロパティを使用することです。これは、ビデオやIMG要素

video { 
    object-fit: cover; 
} 

http://caniuse.com/object-fit

http://dev.opera.com/articles/css3-object-fit-object-position/

に取り組んでいます。これは、クローム31+でのみ互換性がありますが、最も簡単なCSSのソリューションであると勧告候補です。

Answer 4

のみCSSを使用した迅速かつ汚い：で見られるように

video 
{ 
    width: 100%; 
    height: auto; 
    max-height: 100%; 
} 

： http://www.codesynthesis.co.uk/tutorials/html-5-full-screen-and-responsive-videos