问题标签 [html5-fullscreen]

我正在玩一个 Dart 应用程序，试图让全屏模式工作。我的 HTML（不包括样板文件）：

我的飞镖代码：

它在 DartPad 上。

如果我做得正确，单击 div 一次应该会导致 div 进入全屏模式。在 Chromium 上，这有效。当编译为 JavaScript（调试和缩小）时，不会发生这种情况，并且控制台输出：

这发生在 Chrome、Firefox 和 IE（在 Windows 7 上测试）上。据我了解，这是一个常见的 JavaScript 错误，搜索并没有发现任何明显的问题。

任何想法为什么requestFullScreen在将 dart 编译为 JS 时不起作用？

我正在用 Chrome 制作一个打包的应用程序。它必须是全屏的。为此，我在 manifest.json (v2) 中设置了以下权限：

在我的后台 js 文件中，我调用以下函数：

窗口是全屏创建的，只有屏幕右侧有一条 1px 的线，屏幕底部有一条 1px 的线。我用 CSS 尝试了各种方法，例如将 main.html 的背景颜色设为黑色，但白线仍然存在。似乎无法使用 CSS 进行更改。

有没有人遇到过这种情况并找到了可能的解决方案？

操作系统为 Win7 64bit，Chrome 版本 42.0.2311.90 m

我有一台连接到仅用作活动监视屏幕的电视的计算机。我希望它在 Chrome 中全屏显示网站。

由于安全原因，不允许在没有用户操作的情况下强制任何用户进入全屏模式。但是，我正在寻找一种解决方法，使我能够在页面加载时进入全屏状态。

我可以在 Chrome 浏览器中更改任何设置来解决此问题，并允许我的浏览器在页面加载时进入全屏模式吗？

到目前为止，我想到的唯一其他解决方案是为我的操作系统安装某种自动点击器，为我点击全屏按钮，但这感觉有点傻。

我在 Chrome 43 上遇到了一个奇怪的错误，步骤如下：-我打开一个页面，比如说 page1.html，然后使用 html5 进入全屏（单击按钮）

• 我在这个 page1.html 中调整浏览器窗口的大小

• 然后我单击此页面上的链接，打开另一个页面，比如说 page2.html

• 浏览器自动关闭全屏，并重定向到page2.html

• 在 page2.html 中，document.documentElement.offsetWidth/clientWidth 与 window.innerWidth 不同。

• html 和 body 标签在 page2.html 上设置为 100% 宽度和 100% 高度。

如果我在 page2.html 中触发全屏模式并退出，似乎可以解决此问题

如果我在新窗口中正常打开page2.html document.documentElement.offsetWidth/clientWidth 等于window.innerWidth。

这仅在最后一个 Chrome 中发生。有人知道出了什么问题吗？

为什么全屏触发似乎可以解决问题，全屏模式在浏览器内部触发什么？

模拟这个bug page1.html的代码：

我正在使用常用控件（播放/暂停、跟踪、音量和全屏）在网页上播放 HTML5 视频。这些视频是 mp4/ogg 格式。我的用户群中有 80% 使用 Internet Explorer 11（由 Google Analytics 提供），其余的 - Mozilla Firefox、Chrome 和 Safari。问题是 - 除了全屏控件之外的所有控件都不会出现在 IE11 上。在所有其他浏览器上都像魅力一样工作。

caniuse[dot]com/#feat=fullscreen 建议 IE11 具有原生全屏支持。

这是一个例子：

此页面上的嵌入视频允许通过按钮全屏显示。

在元素上使用具有“控件”属性的相同代码不会在 IE11 上显示全屏选项。

小提琴：http: //jsfiddle.net/jaisfiddles/f1apusx3/

我错过了什么？我的印象是 IE11 启用了 msRequestFullscreen() api 代码。

Edge 中似乎存在一个错误，您无法使用键盘事件进入全屏模式。有解决方法吗？

I'm trying to implement custom video controls with JS. I'm able to get it work on the Firefox, Chrome and IE. But in the IE11 when a user went to fullscreen mode the custom control bar is not visible.

Please help me.

由于 YouTube API 无法以编程方式触发全屏（显然有充分的理由，与旧版 Flash 支持有关，如此处所述），我只需使用 HTML5 Element.requestFullscreen API 来全屏播放器 IFrame 即可。

不幸的是，如果用户在 YouTube 播放器中触发全屏，则播放器本身会全屏而不是 IFrame，并且不会产生任何事件来表明它已经这样做了。当应用程序的其余部分不知道什么是全屏和不再是全屏时，这会破坏我的 UI 并导致其他同步问题。部分解决方案是使用无铬播放器，然后渲染我自己的播放器控件，这样用户就无法单击 YouTube 全屏按钮 - 但是，事实证明，双击 YouTube 视频也会使其进入全屏模式，再次无法向应用程序的其余部分发出它已经这样做的信号。

那么，在不影响其他功能的情况下，是否有任何一致的方法可以防止嵌入式 YouTube 播放器在任何情况下全屏显示？

到目前为止，我最好的解决方案是在 iframe 上设置 pointer-events:none 。然而，这并不是很完美，因为它也使得不可能消除显示在 YouTube 视频上的广告横幅。一个理想的解决方案是阻止“双击全屏”响应，而不会弄乱其他任何东西。（例如，单击播放就可以了，因为 YouTube 播放器确实会发出播放事件，让我让应用程序的其余部分保持同步。）

我为我当前的项目实现了一些全屏功能，这是脚本：

使用此脚本一切正常，除非用户使用浏览器功能退出全屏（如键盘中的 f11 和 ESC 按钮），这不会将我的退出按钮再次更新为全屏按钮（我已经看到了完整的Youtube 中的屏幕和最小化按钮，即使用户使用浏览器功能退出全屏，最小化按钮也会更新）。你们能帮帮我吗？谢谢。

这是正在被替换的 html 输入按钮：

当我单击一个按钮时，我希望 iframe 全屏显示。但我不想在点击时退出全屏。如何做到这一点？

要进入全屏模式，我使用以下代码：

更新：似乎只有 Firefox 在点击时退出全屏。如何关闭它？