2

注: これは、ブラウザーの全画面表示に設定された Html5 ビデオに対するフォローアップの質問です。フラッシュ ムービーの noborder と同じです。

受け入れられた回答のコードをイベントリスナー内にラップしました。これが結果です。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body, html {
                width: 100%;
                height: 100%;

                margin: 0;
                padding: 0;
            }

            #container { 
                position: absolute; 
                width: 100%; 
                height: 100%; 
                overflow: hidden; 
            }

            #player { 
                position: absolute; 
            }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

        <script type="text/javascript">
            $(window).load(function () {
                adjust = function () {
                    var $player = $('#player');
                    var $window = $(window);

                    $player[0].height = $window.height(); 

                    $player.css('left', (($window.width() - $player.width()) / 2) + "px");
                };

                adjust();

                $(window).resize(function () {
                    adjust();
                });
            });
        </script>
    </head>
    <body>
        <div id="container">
              <video id="player" autoplay loop>
                    <source src="background.mp4" type="video/mp4" />
                    <source src="background.ogv" type="video/ogg" />
              </video>
        </div>
    </body>
</html>

ウィンドウを縦方向にサイズ変更すると、空きスペースが確保されます。 ここに画像の説明を入力

これを解決するためのアイデアはありますか？

4

2 に答える 2

2

ビューポートのアスペクト比

ビデオの高さを常にビューポートの高さに設定すると、(上のスクリーンショットのように) ビューポートが非常に広くて非常に短いときはいつでも、左右に未使用のスペースができます。

逆に、ビデオの幅を常にビューポートの幅に設定すると、ビューポートが非常に狭くて非常に高い場合 (上のスクリーンショットの反対)、上部または下部に未使用のスペースができます。

ビデオが常にビューポート全体を占めるようにするための秘訣は、幅と高さのどちらを使用する方がよいかを常に把握しておくことです。これは、ビデオのアスペクト比とビューポートのアスペクト比によって異なります。

  • ビューポートがビデオよりも比例して広い場合は、幅を使用します。
  • ビューポートがビデオよりも比例して高い場合は、高さを使用します。

jQuery

// Set this variable when the page first loads
var videoAspectRatio;

function adjust() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    var viewportAspectRatio = viewportWidth / viewportHeight;

    if (viewportAspectRatio > videoAspectRatio) {

        // Very-wide viewport, so use the width
        $player.css({width: viewportWidth + 'px', height: 'auto'});

        // Position the video as needed
        // ...
    }
    else {
        // Very-tall viewport, so use the height
        $player.css({width: 'auto', height: viewportHeight + 'px'});

        // Position the video as needed
        // ...
    }
}

$(document).ready(function(){
    // Get the aspect ratio of the video
    videoAspectRatio = $player.width() / $player.height();
    adjust();
});

$(window).resize(function(){ adjust(); });
于 2013-05-07T14:33:03.120 に答える