问题标签 [html5-fullscreen]

我想检测 HTML5 视频全屏模式。下面的代码仅适用于 chrome。该代码不适用于 Firefox 和 IE。我没有 Safari，但我希望它也能在 Safari 中工作。

我尝试了不同的方法，但只在 chrome 中工作。谁能帮我解决这个问题。我在谷歌上搜索了一整天，但找不到任何解决方案。帮助将不胜感激。

所以我隐藏了我的嵌入 youtube 视频控件：

但是我仍然可以通过双击视频打开使视频全屏，这很好。

实际上，我还想要一个自定义按钮来让播放器全屏显示。

我实际上可以制作iframe#player 全屏，或使用其中一种策略，但我更希望有一种本地方式来做到这一点，这意味着实际调用在视频上双击时调用的方法。

我有机会做到吗？该文档似乎没有明确地谈论它，并且检查playerJS var 也没有给我带来太大的成功。

通过在 Phaser 中使用 Text 对象的事件使用 Chrome 启动全屏onInputDown可启用全屏并在所有边上留有边距。我在 Phaser 示例中发现 onDown 事件也发生了同样的事情game.input。http://phaser.io/examples/v2/display/fullscreen

我怀疑我的电脑可能有问题，但在请朋友尝试上面的示例后，他遇到了类似的情况。唯一的区别是边距创建的背景。

奇怪的是，如果我要调用onInputDown来自 Text 对象的事件正在调用但从 Button 对象调用的相同函数，则将没有边距。适当的全屏。从添加到 html 标签等的事件侦听器中调用所述函数<p>也<label>可以<button>正常工作。

我的问题是：为什么按照我在第一段中解释的方式启用全屏时会创建边距？除了从不同的来源调用函数之外，有没有办法删除这些边距？如果您使用 Chrome 从示例链接中获得正确的全屏，请将其添加到您的答案中。

我有一个 HTML 视频，当用户单击播放时会全屏播放。如果用户在全屏范围内点击转义，一切正常 - 视频停止播放并退出全屏。但是，如果用户在全屏内暂停视频，然后点击退出，则视频会再次开始播放，导致视频中的声音在退出全屏时返回的页面上循环播放。我的js控件如下：

如果用户在全屏内暂停然后点击“退出”以退出全屏，如何阻止视频/音频重新启动？

我正在使用全屏 api，边框的默认颜色是黑色，如下图所示：

图片来自http://blogs.sitepointstatic.com/examples/tech/full-screen/index2.html。

我想将此背景颜色更改为不同的颜色。假设 div 有 id #content，我试过使用

但这对我不起作用。

如何更改颜色？

有没有办法使用javascript检测浏览器何时退出全屏模式？

背景信息：
我正在开发一个 HTML5 播放器，并且有一个按钮可以进入全屏。
在全屏模式下，我希望隐藏工具栏（用于播放器）。
然后，当用户退出全屏模式时，我希望工具栏再次可见。
我能够检测到何时单击了我添加的全屏按钮，以及何时按下了转义键。
但是，我无法确定何时单击浏览器消息“退出全屏”。

问题：
我需要知道如何添加事件或以某种方式检测用户
何时在全屏模式下单击“退出全屏 (Esc)”，以便让播放器
显示我的工具栏。向转义键添加事件并不能解决我的问题。

要在 Chrome/Safari 中禁用 HTML5 视频全屏按钮，此 CSS 有效，但在 FF/IE 中无效：

我在这个线程中找到了它，其中有一个隐藏所有浏览器中的全屏按钮的小提琴。

我在CodePen中复制了那个小提琴，结果不同。该按钮隐藏在 Chrome/Safari 中，但在 FF/IE 中显示。我错过了一些东西，但我不确定是什么。

我创建了一个投资组合类型（基于 WordPress）的网站，使用FullPage和 Flexslider（作为绝对定位的弹出窗口），它有一个 FullScreen 按钮，目前让我做一些噩梦，但只有第二个“。全页中的“部分”（它只有两个部分）。我还按照 FullPage 文档中的建议使用 SlimScroll.js，因为它可能比窗口高。

对于 Chrome，动画是“笨拙的”，当它进入全屏时，它会等待一秒钟，直到它真正出现。请看下图：

转换发生的屏幕截图

我添加了以下代码，它适用于第一部分，但不适用于第二部分......：

然而，在 Safari 上，过渡是平滑的，但时不时地，当它完成时，它会闪烁......！

在 Firefox 上，全屏淡入淡出没有太大问题。（有没有办法将它替换为缩放类型的动画？

我的整页设置：

我的 FlexSlider 设置：

（Flexslider 在函数内部初始化popupslider()。）

有没有办法“解决”这些问题？

非常感谢任何可以帮助我的人。

编辑：

我已经看到 Chrome 中的延迟是因为弹出窗口超出了缩略图，因此即使它们不在视图中，它们仍在调整它们的大小；我对此的解决方案是在弹出滑块打开时应用“显示：无”。

Safari 中的闪烁是因为 FullPage.js 改变了部分的大小和它们的“translate3d”，所以当调整发生时会有闪烁。默认的 Fullpage.js 特性是在调整时实际显示上面部分的一部分，但是由于我在 .active 部分使用 100vh，它不会在 Chrome、Opera 或 Firefox 上显示，并且只会在 Safari 中闪烁（因此我想知道闪烁是！）

可能解决它的唯一方法是重新编码 Fullpage.js 的 translate3d（和高度/宽度）代码也使用“vh”，这样它就不必调整大小。如果有人有现成的代码，那将不胜感激！（IE8 是不需要支持的）。

干杯

视频托管网站 openload.co 似乎找到了一种方法来强制浏览器进入全屏模式，而不在页面顶部显示通常的消息（比如“www.youtube.com 现在是全屏的。退出全屏。 允许”）。至少在 Mac OS X v10.10.5 上的 Chrome 50.0.2661.94（64 位）上。这似乎不适用于 Firefox 和 safari。

为了证明这一点，我在这里上传了一个视频：https ://openload.co/f/88QXNNav4rg/

只需点击播放按钮。当心几个弹出窗口。

我想知道他们是怎么做到的。只是出于好奇。这种实现方式对用户来说非常烦人。我知道这是非常糟糕的做法。

听起来很简单，但绝对是一场噩梦。我无法检测到正在按下的退出按钮。我需要知道是否退出全屏模式，因为您无法阻止按下退出按钮。javascript 被注入到在 webview 中加载的 HTML。

这仅在视图不是全屏时有效！

进入全屏：