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

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

在使用flash之前，我使用了与“noborder”相等的“Scale”。这是结果：-点击右菜单，弹出窗口将打开视频

我想用HTML5视频做同样的事情。我可以将其设置为全浏览器大小，但会根据屏幕大小在顶部和底部或左侧和右侧显示黑色条，以保持比例。结果是：

有什么办法吗？有可能吗

谢谢

---

Bruno

使用HTML5

视频

元素，缩放其中一个维度会导致另一个维度自动缩放以保持纵横比。同样地，如果您将

视频

元素的

高度

设置为

窗口

的

高度

，并将其居中放置在包含

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>

    // 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");

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

  #player { 
      position: absolute; 
  }

CSS:

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

    // 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");

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

  #player { 
      position: absolute; 
  }

请看一下我的回答。问一个新问题，伙计，你更有可能得到回答。