6

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

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

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

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

4

5 回答 5

2

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

旧的，简单的和肮脏的把戏......但有效

于 2013-03-05T19:06:18.777 回答
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>
于 2014-02-25T10:00:04.123 回答
0

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

于 2014-02-10T03:56:03.480 回答
0

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

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

于 2021-11-23T23:11:26.627 回答
-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);
  }
}
于 2015-02-04T04:02:20.963 回答