html - 全屏视频切换 HTML

Question

HTML 5 中的视频标签非常吸引人。我需要知道是否可以让用户切换全屏播放。我不想使用任何其他视频插件。我只需要使用视频标签。这可能吗。请帮帮我....

Answer 1

您可以使用以下代码创建一个按钮，将视频带入全屏模式。

Javascript代码：

<script type="text/javascript">
function goFullscreen(id) {
  var element = document.getElementById(id);       
  if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }  
}
</script>

html代码：

<video class="video_player" id="player" width="100%" controls="controls" autoplay="autoplay">
  <source src="INPUT VIDEO URL HERE"/>
  Your browser does not support the HTML5 video tag.  Use a better browser!
</video>
<button onclick="goFullscreen('player'); return false">
  View Fullscreen!
</button>

Answer 2

是的。有可能的。但是，大多数浏览器都有一些限制。目前仅支持（截至 2012 年 6 月）基于 Webkit 的浏览器，如 Safari 和 Chrome。

请检查以下内容：

1. http://videojs.com/
2. http://blog.jilion.com/2011/07/27/world-s-first-true-html5-fullscreen-video（仅适用于 Safari）
3. http://easyhtml5video.com/
4. http://johncblandii.com/2011/07/html5-video-fullscreen.html

Answer 3

据该网站称，所有“大浏览器”中只有一半支持全屏播放。我的谷歌浏览器在尝试全屏时实际上崩溃了。然而，随着时间的推移，将会有一个全局切换。