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'。我说是因为我使用的是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和视口高度进行高度检查。

全流血视频，保持宽高比，中心，纯javascript

1 个答案: