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;
}

全屏幕背景视频，涵盖所有可用空间

1 个答案: