0

要素のアスペクト比を維持しながら、「フルブリード」または完全なブラウザー エクスペリエンスとして機能させたいと考えています。ビデオは、新しいブラウザ ウィンドウのサイズに合わせて上下する必要がありますが、ブラウザ ウィンドウの中央にも配置する必要があります。時々、一部のビデオが切り取られることがありますが、それは問題ありません。純粋な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 ソリューションのみをお願いします。

4

1 に答える 1

0

完全にフルスクリーンではないことを除いて、私はこのようなことをしました.450pxの高さのページヘッダーの背景ビデオでした. 私は 25vw を使用していて、ビューポートの幅に基づいて高さを変更しているため、ish と言います。基本的には動画を中央に配置したかったのですが、どうすればよいでしょうか?

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は、ビデオラッパー要素の高さと親要素の高さの高さの差をオフセットするようにビデオラッパーを設定しているだけです。縦横比を同じに保ち、必要に応じてビデオを出血させますが、親要素の垂直方向の中央に配置できます。

これは非常に大雑把でした。私は約 1 時間前にこれに取り組んでいたので、やり直してダイヤルインする必要があることがたくさんあると確信していますが、うまくいけば、これがあなたの道に沿って役立つことを願っています。ビデオ要素またはビデオラップ要素のouterHeightとビューポートの高さで高さのチェックを行います。

于 2013-12-05T03:26:16.133 に答える