2

バックグラウンド ビデオを使用して新しいクライアント スプラッシュ ページを作成しました。iPhone のレスポンシブ調整と iOS でのバックグラウンド ビデオの停止を除けば、Retina でテストすることは思い浮かびませんでした。

今日、MBP Retina で見ると、ビデオが高さの「正しいピクセル数」をカバーしているように見えますが、ビデオを強制的に「2x」をカバーする方法がわかりません。

この仕様について聞いたことがありますか？

ビデオ背景の最小高さ/最小幅を網膜の「 200% 」に設定するのと同じくらい簡単でしょうか?

使用されるマークアップ

<div id="bgVideo" class="background">
  <video id="video_background" preload="auto" autoplay loop muted volume="0">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.mp4" type="video/mp4">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.webm" type="video/webm">
    <source src="https://pravassawt.squarespace.com/s/pravassa-fall.ogv" type="video/ogg">
  </video>
</div>
<span style="opacity: .9"<div class="video_pattern" ></div></span>

CSSチャンク

#video_background { 
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1000; 
    overflow: hidden;
}

スクリーンショットとリンク

ライブサイトへのリンク

Retina 解像度ディスプレイのスクリーンショット - (MBP 13" Retina)

4

1 に答える 1

0

Retina に使用できるトリックは、要素の幅と高さを「通常の」ボディ サイズの 2 倍に設定して、JavaScript で要素をインスタンス化することです。

次のように、幅と高さの変数をインスタンス化できます。

var videoWidth = (body.innerWidth() * 2);
var videoHeight = (body.innerHeight() * 2);

次に、 JavaScript ファイルでビデオ背景オブジェクトを作成するときに、幅と高さのパラメーターをvideoWidth と videoHeight の半分に設定します。次のようになります。

videoBackground.setAttribute('width', videoWidth / 2);
videoBackground.setAttribute('height', videoHeight/ 2);

上記のコードは、デスクトップおよび非 Retina デバイスでビデオの背景を正常に表示します。最後に、次のコードを使用して、Retina デバイスが検出されたときにスケールアップできます。

if(window.devicePixelRatio == 2) {
    videoBackground.setAttribute('width', videoWidth);
    videoBackground.setAttribute('height', videoHeight);
}

この方法の利点は、非 Retina ディスプレイのフォールバックを提供することです。このソリューションの重要な側面は、HTML ではなく、JavaScript 内でビデオ オブジェクトをインスタンス化することです。

于 2014-09-08T14:25:19.797 に答える