移动浏览器（Android）上的HTML5视频全屏

Question

移动浏览器（Android）上的HTML5视频全屏

6

经过大量的研究，我仍未找到答案。我想通过FullScreenAPI实现我的目标，但在任何移动浏览器中都不支持它（除了Firefox 19和Blackberry浏览器-但我需要跨浏览器的解决方案）。这里是源代码。我还使用适当前缀的全屏函数在本机android浏览器和移动Chrome上测试了FullScreenAPI。每个函数的类型都为undefined。

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

尽管我谷歌的每个来源都告诉我，在Android浏览器上无法实现原生全屏，但HTML5视频元素及其本机控件提供了一个完美的全屏按钮。

由于我不想使用原生控件，有人可以分享任何巧妙的解决方案来触发HTML5视频全屏按钮的事件吗？

- matewka

5个回答

1

你需要处理移动设备上的 "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>

- user2875402

0

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

- OOO

0

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

在Android Chrome中添加三个属性以启用全屏模式 <iframe allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">

- Mudit Sharma

-1

这是我使用的几乎在任何地方都可以工作的代码：

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);
  }
}

- MikeC

这将使网页全屏，而不仅仅是元素或视频。 - Antony D'Andrea

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Pereira · Accepted Answer

你可以使用绝对定位的关闭按钮来制作宽高为100％的弹出窗口，其中播放HTML5视频。

旧、简单而有点粗糙的技巧...但是确实有效。