Question

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

我在使用等于“noborder”的“Scale”使用flash之前做过。结果如下：http://inoq.com/lxgo/transportes.html - 点击右侧菜单，会弹出一个包含视频的弹出窗口。

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

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

由于布鲁诺

Answer 1

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

<强> HTML：

hidden

<强> JavaScript的：

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

<强> CSS：

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

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

1 个答案: