HTML5視頻縮放模式？

Question

我試圖做一個全屏HTML背景，這很容易。但是由於HTML5視頻在保持寬高比的同時調整大小以適應容器，我無法達到他想要的效果。

HTML5視頻有不同縮放模式嗎？我想擴展到填充和裁剪。

這是在一瞬間完成了預期的效果： 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%);   
} 

顯然使用的變換屬性

獎勵相應的供應商前綴：用圖像來做到這一點，你可以使用「背景-size：cover;「將圖像裁剪到所需的空間：

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

Answer 3

另一種使用CSS執行此操作的方法是使用object-fit屬性。這適用於視頻或IMG元素

video { 
    object-fit: cover; 
} 

http://caniuse.com/object-fit

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

這是僅適用於Chrome兼容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