全屏视频切换 HTML

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11171781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:14:00  来源:igfitidea点击:

Full screen video toggle HTML

htmlvideo

提问by Srivathsan

The video tag in HTML 5 is really fascinating. I need to know whether it is possible to let users toggle full screen play. I dont wanna use any other video plugin. I just need to use the video tag. So is this possible. Please help me out....

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

回答by godofyouall

You can use the following code to create a button that will take the video into full screen mode.

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

Javascript code:

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

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>

回答by Geocrafter

Yes. It is possible. However, there are some limitations in most browsers. It is currently only supported (as of June 2012) in Webkit-based browsers like Safari and Chrome.

是的。有可能的。但是,大多数浏览器都存在一些限制。它目前仅在基于 Webkit 的浏览器(如 Safari 和 Chrome)中受支持(截至 2012 年 6 月)。

Please check the following:

请检查以下内容:

  1. http://videojs.com/
  2. http://blog.jilion.com/2011/07/27/world-s-first-true-html5-fullscreen-video(works only in Safari)
  3. http://easyhtml5video.com/
  4. http://johncblandii.com/2011/07/html5-video-fullscreen.html
  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

回答by RandomDuck.NET

According to this website, only half of all the "big browsers" support full screen playback. My Google Chrome actually crashes when trying to do fullscreen. In time, however, there will be a global toggle.

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