1

我正在尝试将 html5 视频设置为完整的浏览器大小。我可以做到，但不是我想要的。

我在使用闪存之前使用“Scale”等于“noborder”。结果如下：http: //inoq.com/lxgo/transportes.html - 单击右侧菜单，将打开一个带有视频的弹出窗口。

我想用 HTML5 视频做同样的事情。我可以将其设置为完整的浏览器大小，但会根据屏幕大小在顶部和底部或左右显示黑条以保持比例。这是结果：http: //inoq.com/lxgo2/cidade.html

关于如何做的任何想法？有可能吗？

谢谢布鲁诺

4

1 回答 1

2

对于 HTML5video元素，缩放其中一个维度会导致另一个维度自动缩放以保持纵横比。因此，如果您将元素的heightof设置为of ，并将其居中在一个包含set to的包含中，您应该会得到您正在寻找的效果。videoheightwindowdivoverflowhidden

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 回答