javascript - 全屏背景视频，覆盖所有可用空间

基本上，我希望视频表现出与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>

最佳答案

您不能只使用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;
}

关于javascript - 全屏背景视频，覆盖所有可用空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22401064/