Html5视频设置为浏览器全屏 - 与flash电影的noborder相同 [英] Html5 video set to browser full screen - same as noborder for flash movie

问题描述

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

I'm trying to set a html5 video to full browser size. I could do it but not as i want.

我在使用等于noborder的Scale使用flash之前做过。结果如下： http://inoq.com/lxgo/transportes.html - 点击在右边的菜单中，弹出窗口会打开视频。

I did it before using flash using "Scale" equal to "noborder". This is the result: http://inoq.com/lxgo/transportes.html - click on the right menu, a popup will open with the video.

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

I want to do the same using HTML5 video. I could set it full browser size, but keeps showing the black bars on top and bottom or left and right, depending on screen size, to keep the ratio. This is the result: http://inoq.com/lxgo2/cidade.html

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

Any ideas on how to do it? Is it possible at all?

谢谢
布鲁诺

推荐答案

使用HTML5 video 元素，缩放其中一个维度会导致另一个维度自动缩放以保持宽高比。因此，如果您将视频元素的 height 设置为 height 的窗口，并将其置于包含 div 的 overflow 设置为隐藏，你应该得到你正在寻找的效果。

With the HTML5 video element, scaling one of the dimensions causes the other to automatically scale to maintain the aspect ratio. As such, if you set the height of your video element to the height of the window, and centre it within a containing div with overflow set to hidden, you should get the effect you're looking for.

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

这篇关于Html5视频设置为浏览器全屏 - 与flash电影的noborder相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！