，覆蓋了所有可用空間

Question

全屏背景視頻基本上我想要的視頻有同樣的表現方式background-size:cover作品 - 包括所有可用空間 - 例如這裏：http://www.aaronvanderzwan.com/maximage/examples/html5video.html。我調整了比例和居中 - 但它仍然沒有覆蓋所有可用空間。

的Javascript：

$(document).ready(function(e){ 

    var $item = $(".video"); 
    var proportions = $item.width()/$item.height() 


    // shim layer with setTimeout fallback 
    window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      function(callback){ 
       window.setTimeout(callback, 1000/60); 
      }; 
    })(); 



    // usage: 
    // instead of setInterval(render, 16) .... 
    (function animloop(){ 
    requestAnimFrame(animloop); 
    resize(); 
    })(); 


    function resize(){ 

    // center the item 
    $item.css({"top": "50%", "margin-top":-parseInt($item.height()/2)}) 
    $item.css({"left": "50%", "margin-left":-parseInt($item.width()/2)}) 


    // scale it 
    if($(window).width()/$(window).height() < proportions){ 
     scaleProportionalByHeight($(window).height()) 
    }else{ 
     scaleProportionalByWidth($(window).width()) 
    } 
    } 



    function scaleProportionalByWidth (newWidth) { 
    $item.width(newWidth); 
    $item.height(newWidth/proportions); 
    } 

    function scaleProportionalByHeight (newHeight ) { 
    $item.height(newHeight); 
    $item.width(newHeight * proportions); 
    } 

}) 

HTML：

<video class="video" loop autoplay muted autobuffer="autobuffer"> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> 
</video> 

Answer 1

你就不能使用CSS？

這樣的：

HTML

<video loop autoplay muted autobuffer="autobuffer" id="myVideo"> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> 
</video> 

CSS

video#myVideo{ 
    position: fixed; right: 0; bottom: 0; 
    width: auto; height: auto; z-index: -100; 
    min-width: 100%; min-height: 100%; 
    background-size: cover; 
}