问题标签 [html5-fullscreen]

我试图在使用 HTML5 Fullscreen API 的网页中使用 CANVAS 元素来全屏显示。在 Chrome for Android 上进入全屏时，元视口比例更改为值 1，忽略设置集并将分辨率降低 75%。它在 Android 上的 Firefox Mobile 中按预期工作。

问题是，当通过全屏 api 进入全屏时，如何保持移动设备的全分辨率可用于 CANVAS 元素？我通过 meta 设置比例以向 javascript 报告全屏大小，并允许在高分辨率 dpi 设备上使用高分辨率画布。

通过 HTML5 全屏 api 进入全屏时，报告的大小是四分之一，就好像比例设置为 1。

这是一个示例http://3d-360.com/gigapan/broken.html

我想我可能会在 JS 文件上出错，但控制台告诉我没有错误。我在写 JS 文件时，在我的电脑上发生了一个小的无响应后，我遇到了这个问题。

这是我的代码的简化版本，所以有些名字可能很奇怪。但我尽量减少它的长度。

JS文件包括点击按钮事件和全屏视频播放事件。我让exitFullscreen（）函数正常工作，直到这次事故。现在我按'F11'或'Esc'状态恢复，没有发生任何事情。

重要提示：这是 Safari 10 Public Beta 中的一个错误

我的代码应该这样做，空格键成为播放/暂停视频的快捷方式，但仅当用户将鼠标悬停在视频上或全屏时。

它有效！但是在全屏模式下，它会发出错误的声音，为什么？

这是我的代码：

如果有更好的方法，或者如果你知道如何解决它，我会很高兴

注意：在 Safari 10 中测试

我正在努力寻找一种跨浏览器的方式来触发视频上的双击全屏事件。我使用 videoJS 作为播放器框架和全屏 API。我需要一个兼容 IE11、Google Chrome 和 Safari 10 的解决方案。

这是我定义视频标签的 HTML 页面部分：

Anf 这是全屏显示的脚本：

这个解决方案有效，只要我点击视频的边缘，视频就会进入全屏状态，如下图所示：

例如，如果我单击视频中间，则没有任何反应，而如果单击红色箭头所指的边缘，则视频将进入全屏状态。

为了克服这个问题，我尝试将我的视频放在按钮标签中：

这个解决方案及其问题是有效的。我可以点击我的视频并进入全屏模式，但视频区域内出现了一个奇怪的窗口：

我该如何解决这些问题？

我有一个脚本，我可以在全屏模式下切换固定的 DIV。此 div 还可以包含允许全屏显示的 HTML5 视频（例如，灯箱中的视频）。但是，在 webkit 浏览器中，如果 div 进入全屏模式并且 div 也处于全屏模式，则会产生很大的冲突。当从视频播放器和 div 中退出全屏模式时，布局完全被破坏，因为 webkit 浏览器仍然认为我们处于全屏模式...实际上当一切都不是全屏模式时，HTML5 的用户代理样式表video (:-webkit-full-screen-ancestor:not(iframe)) 仍然存在，即使使用 !important 规则也不会改变任何内容。

有没有人有关于这个问题的解决方案？是否有一些解决方法或者可能是在视频全屏播放之前从 DIV 关闭全屏的方法...

这是一个小例子（关闭全屏时不保留视频样式）：https ://fiddle.jshell.net/VbfPC/4/

它在 IE、FireFox 中运行良好，但在 Google Chrome 和 Safari 中运行良好。

祝大家圣诞快乐！

我想全屏，垂直居中div覆盖下面的所有内容。

这是我的代码：https ://jsfiddle.net/uzy78s69/ 看起来效果很好，但是当我向其中添加更多内容时#box效果不佳https://jsfiddle.net/uzy78s69/1/

单击X或Create new post检查行为。

我做错了什么？我该如何解决？

我正在使用 HTML5video元素开发自定义视频播放器，但无法让全屏按钮与Fullscreen API一起使用。

当我单击它时，我收到错误消息：

但是，我正在requestFullscreen使用用户手势发起呼叫……除非我误解了用户手势的构成。单击元素是一种用户手势，不是吗？

我意识到关于 SO 上的全屏 API 存在很多问题，但看起来很多人希望在没有用户交互的情况下启动全屏模式。

我究竟做错了什么？

这个代码有一支笔，但当我找到解决方案时，我可能会改变它。我不会在这里更改代码。

这是代码：

我正在使用带有角材料前端的科尔多瓦开发一个跨平台应用程序。

我在 md 卡列表中使用 HTML5 视频标签来播放带有外部 url 的视频。内联时，视频可以正确播放，并按预期显示本机控件。

但是，当我单击“切换全屏”按钮时，视频确实会进入全屏状态，但默认控件会消失。在此之后我无法返回应用程序 - 原生 android 后退按钮不会关闭全屏 - 而是关闭整个应用程序。

我正在寻找的解决方案将使控件即使在全屏模式下也始终出现；这可以在 iOS 上运行相同的代码。

因此，如果我能帮上忙，我不想花时间开发我自己的自定义视频控件仅用于 android！所以请不要发布关于如何做到这一点的答案（在 SO 和其他地方已经有很多可用的答案）。

我正在使用魅族 m2 note android 设备。

谢谢！

编辑：

控件仍然存在，但在 css 中的阴影 DOM 树中显示为大小为 0 x 0px。即使我使用 !important 标志在 chrome 开发工具中更改它们的大小，它们也不会出现。

有任何想法吗？

我正在为 Adob​​e Captivate 编写一个小部件，它必须在 HTML5 中工作。此小部件包含一个用于切换全屏模式的按钮。基本上，插件看起来像这样：

但是小部件插入到 中iframe，并且iframe它没有allowfullscreen属性，因此阻止按钮切换全屏模式。

我正在寻找一种方法，要么通过从内部执行一些 Javascript来将allowfullscreen属性添加到，要么以正确的配置发布项目以自动添加此属性。iframeiframe

我尝试使用 Javascript 访问器parent.document，但出现错误：

我偶然发现了 HTML5 全屏 API，它可以让我从 JavaScript 将浏览器设置为全屏模式。进一步阅读：http ://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm ）

为了防止滥用，只能通过用户手势“请求全屏”（例如用户按下按钮）。我的问题是是否可以使用 JavaScript 伪造这种“用户手势”，在用户进入页面时强制用户处于全屏模式。

我已经尝试使用 JavaScript 按下隐藏按钮，但没有成功，但也许还有其他我现在不知道的方法。

我知道这将是一个非常糟糕的做法，并且不打算在公共网站上使用它。