全出血视频，保持纵横比，居中，纯javascript

Question

我想让我的元素保持其纵横比，但充当“全出血”或更确切地说是完整的浏览器体验。视频应向上或向下以适应新的浏览器窗口尺寸，但也应在浏览器窗口中居中。有时，一些视频会被裁剪——这对我来说没问题。我正在尝试使用纯 JS 为视频元素重新创建背景覆盖 CSS 属性，如果这有助于您想象的话。对于那些不知道那是什么的人，以下是：

.bkgdCover{
  background: no-repeat center center;
 -webkit-background-size: 100% 100%;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

以下是我尝试在纯 javascript 中做同样的事情：

function getWinSize(){
    var wid = 0, hei = 0;

    if (document.documentElement && document.documentElement.clientHeight){
        wid = parseInt(window.innerWidth,10);
        hei = parseInt(window.innerHeight,10);
    } else if (document.body){
        wid = parseInt(document.body.offsetWidth,10);
        hei = parseInt(document.body.offsetHeight,10);
    }
    return [wid,hei];
}

this.resize2 = function(){
    fullBleedVideoPlayer();
};

function fullBleedVideoPlayer() {
    var viewport=getWinSize();
    var videoRatio = 1080 / 1920;
    var browserHeight = viewport[0];
    var browserWidth = viewport[1];
    var tmp_windowRatio = viewport[1] / viewport[0];
    if (videoRatio > tmp_windowRatio) {
        tmp_height = Math.round(browserWidth * videoRatio);
        _player.style.width= browserWidth+ "px";
        _player.style.height= tmp_height+ "px";
        _player.style.marginLeft = 0 + 'px';
        _player.style.marginTop = -Math.round((tmp_height - browserHeight) / 2) + 'px';
    } else {
        tmp_width = Math.round(browserHeight * (1 / videoRatio));
        _player.style.width= tmp_width+ "px";
        _player.style.height= browserHeight+ "px";
        _player.style.marginLeft = -Math.round((tmp_width - browserWidth) / 2) + 'px';
        _player.style.marginTop = 0 + 'px';
    }
}

很遗憾，这不会重现 CSS 封面。如果你能看到我在哪里犯了错误或者你自己也犯了同样的错误，我很想听听你的意见。请只使用纯 JS 解决方案。

Answer 1

我只是做了这样的事情，除了它不是完全全屏，它是一个页面标题的背景视频，它的高度为 450px'ish'。我说 ish 是因为我使用的是 25vw，它会根据视口宽度改变高度。我基本上希望视频保持居中，但如何？

HTML

<section id="homepage--hero">
  <div class="fullpage-video-wrapper">
    <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
      <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
      <!-- doesnt support video -->
      <img src="#" style="width: 100%; height: auto;" />
    </video>
  </div>
</section>

CSS

#homepage-hero {
  display: block;
  height: 35vw;
  width: 100%;
  position:
  relative;
  overflow: hidden;
}

.fullpage-video-wrapper {
    position: absolute;
    bottom: 0px;
    left: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
}

.fullpage-video-wrapper {
    min-height: 100%;
    min-width: 100%;
}

JS

if( $('.fullpage-video-wrapper').length > 0 ) {
    var videoWrapper = $('.fullpage-video-wrapper'),
        videoParentWrapper = $(videoWrapper).parent();

  if($(videoWrapper).height() > $(videoParentWrapper).height() ) {
    var difference = ($(videoWrapper).height() - $(videoParentWrapper).height()) / 4
    $(videoWrapper).css({
      bottom: -parseInt(difference)
    });
  }

  $(window).resize(function(){
    if($(videoWrapper).height() > $(videoParentWrapper).height() ) {
      var difference = ($(videoWrapper).height() - $(videoParentWrapper).height()) / 4
      $(videoWrapper).css({
        bottom: -parseInt(difference)
      });
    }
  });
 }

这样做的目的是使视频即使在调整窗口大小时也保持相同的纵横比，将其定位到主页英雄的底部，这使其响应良好而不会导致您看到视频的背景颜色-包装，但显然没有居中。 jQuery 只是将视频包装器设置为抵消视频包装器元素高度与其父元素高度的高度差。允许纵横比保持不变，在需要时放出视频，但允许它垂直居中在它的父元素中。

这太粗糙了，因为我大约一个小时前才开始处理这个问题，所以我确信我需要重新处理并拨入，但希望这可以帮助你沿着你的道路前进，应该是一样的解决方案，除了您对视频元素或视频包装元素 outerHeight 和视口高度进行高度检查。