Html5视频设置为浏览器全屏 - 与flash电影的noborder相同

Question

我正在尝试将html5视频设置为完整的浏览器大小。我可以做到，但不能按照我的意愿去做。

我在使用闪光灯之前使用等于"无边界"的"缩放"之前就这样做了。这是结果：http://inoq.com/lxgo/transportes.html - 单击右侧菜单，将打开一个带有视频的弹出窗口。

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

关于如何做到这一点的任何想法？可能吗？

谢谢布鲁诺

Answer 1

对于 HTML5 video 元素，缩放其中一个维度会导致另一个维度自动缩放以保持纵横比。因此，如果您将video元素的height设置为window的height，并将其居中overflow设置为hidden的包含div，您应该得到所需的效果。

.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; 
  }