1

html5ビデオをフルブラウザサイズに設定しようとしています。私はそれをすることができましたが、私が望むようにはできませんでした。

「noborder」に等しい「Scale」を使用してフラッシュを使用する前にそれを行いました。結果は次のとおりです。http：//inoq.com/lxgo/transportes.html-右側のメニューをクリックすると、ビデオとともにポップアップが開きます。

HTML5ビデオを使用して同じことをしたいと思います。ブラウザのフルサイズに設定することもできますが、比率を維持するために、画面サイズに応じて上下または左右に黒いバーが表示され続けます。これが結果です：http：//inoq.com/lxgo2/cidade.html

それを行う方法について何かアイデアはありますか？それは可能ですか？

ブルーノありがとう

4

1 に答える 1

2

HTML5video要素を使用すると、一方の寸法を拡大縮小すると、もう一方の寸法が自動的に拡大縮小されてアスペクト比が維持されます。そのためheight、video要素heightのをのに設定し、をに設定しwindowて包含内の中央に配置すると、探している効果が得られるはずです。divoverflowhidden

HTML：

  <div id="container">
        <video id="player" autoplay loop>
          <source src="http://inoq.com/lxgo2/videos/transtejo.mp4" type="video/mp4" />
          <source src="http://inoq.com/lxgo2/videos/transtejo.webm" type="video/webm" />
          <source src="http://inoq.com/lxgo2/videos/transtejo.ogv" type="video/ogg" />
          Your browser does not support the video tag.
        </video>
  </div>

JavaScript：

    // Using jQuery for ease
    var $player = $('#player');
    var $window = $(window);

    // if you only set one of width and height, the other dimension is automatically 
    // adjusted appropriately so that the video retains its aspect ratio.
    // http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/        
    $player[0].height = $window.height(); 

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

CSS：

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

  #player { 
      position: absolute; 
  }
于 2012-08-04T00:06:28.493 に答える