移动浏览器上的 HTML5 视频全屏 (android)答案

【问题标题】：HTML5 video full screen on mobile browsers (android)移动浏览器上的 HTML5 视频全屏 (android)
【发布时间】：2013-02-19 20:27:51
【问题描述】：

经过大量研究，我还没有找到任何问题的答案。我想通过 FullScreenAPI 实现我的目标，但任何移动浏览器都不支持它（Firefox 19 和 Blackberry 浏览器除外 - 但我需要一个跨浏览器解决方案）。 Here's the source。我还在原生 android 浏览器和移动 Chrome 上测试了 FullScreenAPI，并带有适当的前缀全屏功能。每个函数的类型都是undefined。

另一种方法是 rtsp 协议，通常由外部播放器处理。 Here 是假设 m.youtube.com 使用该解决方案的人 - 我认为这不是真的（也许答案已经过时）。 Youtube 使用原生视频的全屏。在移动 Chrome 上，当您点击播放按钮时，电影会立即全屏显示。

虽然，我 google 的每个来源 都告诉我，原生全屏在 android 浏览器上是不可能的，但 HTML5 视频元素及其原生控件 为我们提供了一个可以工作的全屏按钮完美无缺。

由于我不想要原生控件，任何人都可以将任何巧妙的解决方案分享给How to trigger HTML5 video fullscreen button'sevent？

【问题讨论】：

标签： android html html5-video fullscreen

【解决方案1】：

您可以在播放 HTML5 视频时使用绝对关闭按钮以 100% 的宽度/高度制作弹出窗口。

旧的、简单的和肮脏的把戏……但有效

【讨论】：

是的，我忘了在问题中分享这种可能性。不幸的是，这对我来说不是一个解决方案:(我需要从本机按钮触发全屏（或者，如果不可能，我需要 100% 确定）。

【解决方案2】：

我认为你需要为移动设备处理“webkitbeginfullscreen”和“webkitendfullscreen”事件。它会

<!doctype html>
<html>
<head>
 <title>video</title>
 <script type="text/javascript">
 function videoControl() {
    var myVideo = document.getElementById('myVideo');
    myVideo.addEventListener("webkitbeginfullscreen", enteringFullscreen, false);
    myVideo.addEventListener("webkitendfullscreen", exitingFullscreen, false);
}

function enteringFullscreen() {
    alert("entering full-screen mode");
}

function exitingFullscreen() {
    alert("exiting full-screen mode");
}
 </script>
</head>
<body onload="videoControl()">
 <div id="videoContainer">
 <video id="myVideo" src="myVideo.m4v" autoplay controls>
 </video>
 </div>
</body>
</html>

【讨论】：

【解决方案3】：

在用户交互事件处理程序中尝试 video.webkitEnterFullscreen()（例如：点击）

【讨论】：

【解决方案4】：

大多数人面临这个问题是因为 HTML5 视频是在 <iframe> 内部实现的。

在iframe中添加三个属性以在adroid chrome中启用全屏 <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

【讨论】：

【解决方案5】：

这是我使用的，应该几乎可以在任何地方使用：

function toggleFullScreen() {
  var doc = window.document;
  var elem = doc.body; //the element you want to make fullscreen

  var requestFullScreen = elem.requestFullscreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
  var cancelFullScreen = doc.exitFullscreen || doc.webkitExitFullscreen || doc.mozCancelFullScreen|| doc.msExitFullscreen;

  if(!(doc.fullscreenElement || doc.mozFullScreenElement || doc.webkitFullscreenElement || doc.msFullscreenElement)) {
      requestFullScreen.call(doc.body);
  }
  else {
    cancelFullScreen.call(doc);
  }
}

【讨论】：

这会使网页全屏，而不仅仅是元素或视频。