全屏视频切换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>