问题标签 [html5-fullscreen]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
868 浏览

html - 我可以使用带有 HTML5 全屏的 jQuery-UI 对话框吗?

我一直在开发一个 Web 应用程序,除其他外,它使用 Google Maps API 显示带有“大头针”标记兴趣点的区域地图。当用户单击一个 pin 时,应用程序使用 jQuery-UI Dialog 在对话框中显示有关单击的 pin 的信息。

后来,我决定最好有一个用户可以单击以使地图全屏显示的按钮。这对地图来说没有问题,但是当用户点击一个图钉时,除非他退出全屏模式,否则他看不到对话框。

这可能是因为div保存对话框的 位于div保存地图的全屏之外。我尝试将div保存对话框的对话框移动到div保存地图的对话框中,但这也不起作用;显然,jQuery-UI 将 移动div到文档的末尾。

有没有一种实用的方法可以让 jQuery-UI Dialog 与 HTML5 全屏配合使用?我在其他网站上看到过关于此的其他主题,但我还没有找到满意的答案。

0 投票
0 回答
214 浏览

javascript - 全屏后 WebGL 内容变得模糊

我有一个 HTML5 文档,其中包含一个 iframe 采购 WebGL 内容。我已将 iframe 标记为allowfullscreen=true并且 WebGL 内容调用 HTML5 全屏 api。在 Chrome 和 Firefox 中,全屏请求发生并且工作正常。WebGL 内容以最高分辨率呈现在整个窗口中。然而,在 IE-11 中,窗口被全屏显示,但 webgl 内容现在模糊得无法辨认。这是 IE-11 的已知缺陷吗?我必须对全屏做些什么才能使其正确地与 IE-11 一起工作吗?

0 投票
1 回答
631 浏览

html - html5视频全屏限制div大小

有谁知道如何将 HTML5 视频全尺寸限制限制在屏幕的一部分而不是整个屏幕。

示例:我的屏幕尺寸为 1920 * 1080,其中将显示我的整个页面,并且在页面顶部我有一个 920 * 800 的模态对话框,当我单击任何视频的全屏时,我将在其中显示视频列表占用我的整个屏幕大小 1920 * 1080,而不是它,我希望它只占用 920 * 800,这是我的模态对话框大小。有什么想法吗。任何帮助将不胜感激。

0 投票
0 回答
803 浏览

javascript - asp.net 站点中的全屏 div 元素

我有一个带有媒体库的 html 文档:

按钮有一个功能:

当我在简单的 html 文件中调试此代码时,一切正常。我的视频库在所有浏览器中全屏显示。当我在 ASP.NET 站点中调试此功能时,问题出现了。在 Chrome 和 Mozilla 浏览器中它仍然可以,但在 IE-11 中没有指定 div 元素的 msRequestFullscreen() 函数,它只是未定义。asp.net 如何影响 html 元素?

0 投票
1 回答
1491 浏览

javascript - requestFullscreen 多个元素

因此,假设您正在使用 HTML5 视频播放器库,例如 Videojs。你想通过添加一个额外的按钮来扩展这个库的功能,但是由于与这个问题无关的原因,你不想进入整个插件编码业务,所以你只需将播放器放在一个容器中并添加一个绝对定位按钮,例如:

问题是在某些时候您可能会单击播放器的全屏按钮,这将requestFullscreen仅调用视频元素和视频元素。这意味着您的按钮或该容器上的其他任何东西都不会处于全屏模式。

在 webkit 浏览器上,您可以通过z-index在全屏模式下设置等于或高于视频元素的值来使其他元素在全屏上保持可见。在 Firefox 上,该元素需要更改为position: fixed(但您不能使用-moz-full-screen前缀来设置它的样式,因为该元素未被识别为处于全屏模式),而在 IE 上它根本不可见。

我试图找出全屏模式是否仅限于单个元素(以及它的子元素),或者是否可以同时拥有多个全屏元素。有没有其他人为类似的事情而苦苦挣扎?有什么解决方法吗?

0 投票
1 回答
838 浏览

css - 响应式全屏 HTML5 视频问题

我正在尝试实现一个全屏 html5 视频启动/登陆页面,它在桌面浏览器上运行良好,除了它在视频下留下一个黑条/空间。

问题是在较小的屏幕或移动设备上测试播放时,它会破坏响应性并且无法显示海报图像。我确信这是一个相当简单的修复,但是,这是第一次使用 HTML5 视频。

使用以下 CSS:

以及以下 HTML:

我尝试将 CSS 更改为:

这个 CSS 用视频完全覆盖了视口,这是想要的结果,但同样,它在桌面和响应式上都溢出,进一步破坏了响应式布局。

任何帮助将不胜感激。

0 投票
2 回答
7176 浏览

javascript - 带有 iOS Safari 网络浏览器的全屏 html5 视频

有没有办法在 iOS Safari(移动网络)上触发全屏。全屏或全视口都会很棒。这是我在下面尝试过的:

在用户操作上,上述函数被传递一个视频元素,如果全屏可用,则在视频元素上执行全屏。

这在 Safari for IPAD 上不起作用。


一种解决方法是将控件属性应用于视频标签,然后让用户使用本机播放器全屏启动全屏。

除了上述之外还有什么想法吗?

0 投票
1 回答
345 浏览

javascript - 如何将onclick变为onload?

我想自动使页面全屏而不需要单击任何内容。我试图将其更改 <body onclick="toggleFullScreen()"><body onload="toggleFullScreen()">. 但什么也没发生;它不起作用。:(

这是javascript..

0 投票
0 回答
769 浏览

javascript - 对象标记和框架集标记不起作用 FullScreen API

我在对象标签中有一个页面,它使用全屏 API 使该页面全屏显示。不幸的是,它在对象标签中不起作用(firefox 除外),但在带有 allowFullScreen 属性的 iframe 标签中运行良好。

这是实现。

在此处输入图像描述

我已经尝试过其他库,例如 screenfull.js。我必须只使用对象标签和框架集(这就是 iframe 不能在这里使用的原因)。请给我任何建议。

0 投票
0 回答
245 浏览

ios - 如何以编程方式隐藏 iOS Chrome 上的导航栏

我正在寻找一种以编程方式关闭 iOS Chrome 浏览器导航栏的方法。我的意思是,不使用用户手势。

我已经尝试过 Web Fullscreen API,但没有成功。

看起来这个浏览器的文档和资源很差。