问题标签 [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.
javascript - 无法在“元素”上执行“requestFullScreen”：API 只能由用户手势启动
我想让我的 HTML5 游戏在启动时全屏显示。当我通过单击按钮执行此操作时，它会全屏显示。但是当我使用 window.onload 使其进入全屏加载时，它在控制台上回复 Failed to execute 'requestFullScreen' on 'Element': API 只能由用户手势启动。我正在使用铬。有解决方法吗？
我的代码：
javascript - 在 PhoneGap 上将图像设置为全屏高度 - 了解 window.devicePixelRatio
我正在尝试将图像设置为 phoneGap 应用程序上屏幕的全高。目前，我正在使用以下代码来确定屏幕“尺寸”，并且我正在使用 javascript 将图像分辨率设置为这些暗淡。
这会在 iPhone 6（视网膜显示屏）上产生所需的结果，并在我的笔记本电脑上进行渲染。问题是当我在我的 Galaxy Note-3 上尝试它时，图像非常大，原因如下：当我console.log(window.screen.availHeight);的 Note 似乎认为它的高度是1920像素时 - 而我的 iPhone 6 只有647（它是视网膜显示器） ，所以我知道 1920 不是实际的像素数（或者是吗？）。我查看了设备是如何获取它的window.screen.availHeight，发现有这个变量被调用window.devicePixelRatio，它在 Note 3 上的值是3。我认为 Note 3 的视口尺寸是 360x640，因此 devicePixelRatio 的3是有意义的。现在，让我感到困惑的是，当我console.log(window.devicePixelRatio);在我的 iPhone 6 上时，结果是2. 我尝试使用以下代码将图像高度设置为“availHeight”值的 1/3：
它在 Note 3 上效果很好（因为它将图像高度缩小到 360 - 应该是这样），但在 iPhone 上，将图像缩小到 324（或接近的值）意味着图像只出现在页面的一半以上高度。
我的问题是，不是除以 devicePixelRatio，而是我可以从设备获得另一个变量以确定缩小图像的比率？生成的比率在 iPhone 上应为1 ，在 Note 3 上应为1/3，以使图像正确显示在整个高度上。
非常感谢您！
javascript - 如何编写插件或用户脚本将嵌入的 YouTube 视频弹出到新窗口？
作者的笔记
我想我可以在受到评论的启发后自己实现它。感谢您的光临。
原始问题
例如，我想在页面中弹出嵌入的 YouTube 视频
https://www.udacity.com/course/viewer#!/c-ud037/l-1649018590/m-1659588540
看起来像这样
youtube html5 播放器作为 iframe 嵌入
我希望播放器可以在带有 URL 的新窗口中弹出：
感谢 JaromandaX，我的临时脚本如下：
我的问题是，通过如图所示的按钮切换 youtube 播放器的内容后，iframesrc没有改变。因此，单击该按钮仍会将我带到上一课的 youtube 播放器。
css - 在 MS IE11 中启用全屏时无法滚动
我有一个使用 Bootstrap3 固定页眉和页脚的页面。下面的内容是可滚动的。用户可以通过 F11 或按钮（使用 FullScreen-API）启用全屏模式。这在 Chrome 和 FF 中运行良好，但在 IE11 中存在问题。使用 F11 的全屏始终可以正常工作。但是使用 javascript 切换全屏模式会导致我的页面在使用 IE11 时以缩小的宽度和高度放置在顶部底部。我的页眉和页脚保持不变。
我创造了一个小小提琴，它可以显示我在做什么。不幸的是，全屏不会在 JSFiddle 中切换，所以最好将代码复制到其他地方：https ://jsfiddle.net/j122kdju/
这是该网站的两个屏幕截图。我给了 html 一个绿色的背景颜色，以查看通过 JS API 启用全屏时发生的情况。第一张图片显示了 IE11 中没有全屏的页面：
第二个显示通过 IE11 中的 JS API 启用全屏：
我可以通过将 css 中的 html 宽度设置为 100% 来处理这个问题。无论如何，溢出的页面不能再滚动了。滚动条不可见。如前所述，这在其他浏览器中运行良好。
有没有可用的解决方法？我在这里错过了什么吗？谢谢
编辑：可能相关：IE 在全屏模式下无法滚动
javascript - 如何在单个 HTML5 全屏模式下显示 2 个视频
我有 2 个视频标签。如何显示包含两个视频的单个全屏模式（例如，视频聊天，我想同时看到自己的相机和朋友的相机）？
fullscreen - 如何使用javascript检测弹出框“退出全屏（F11）”上的用户CLICK？
当屏幕为全屏模式时。用户可以通过按下F11或单击弹出框进入正常模式进入正常模式。我如何检测用户点击弹出框而不是任何类型的按键“退出全屏（F11）”与javascript
记住我需要点击事件监听器而不是按键事件监听器
javascript - Fullscreen API - 如何将元素缓慢扩展到全屏
我知道Fullscreen API。我正在尝试使 div 从全屏缓慢展开/折叠（例如超过 2 秒），而不是立即展开。有一个简单的方法吗？
android - 移动浏览器（chrome）中的 HTML5 全屏模式忽略视口配置 - 错误或功能？
我的应用显示移动设备的一些页面。此类页面已<viewport>仔细计算标签，以便它们 100% 适合设备屏幕，例如：
在应用程序中，您可以通过调用 HTML5 api 进入全屏模式：
（jQuery 模块只是调用requestFullScreen()寻找供应商前缀等。）
发生的情况是，在全屏模式下，视口比例被忽略（我猜重置为“1”）。当我退出全屏模式时，视口比例再次得到尊重。
这是一个错误吗？文档中的灰色区域？还是全屏模式的预期功能？任何人都可以确认这也发生在移动 Safari 上吗？
<body>我在全屏模式下通过 azoom或手动缩放了自己transform，但与缩放相比，性能很糟糕viewport。
javascript - 当我按下 HTML5 视频元素的默认全屏按钮时，如何捕获全屏事件？
使用 HTML5video标签和iconic.
这是我的模板的一部分：
这是我的控制器：
如您所见，标签没有自定义控制按钮，video并使用由铬本身创建的默认控制栏。
fullscreen现在我想在按下按钮时做点什么。我找到了一个将两个监听器添加到视频对象的解决方案：webkitbeginfullscreen和webkitendfullscreen视频对象，但它没有被触发。
javascript - 今天的 Google Doodle 如何在 iOS9 Safari 中“强制”全屏？
今天谷歌有另一个相当复杂的游戏作为他们的涂鸦：http ://www.google.com/logos/2016/scoville/scoville16.html?hl=en
我对它在手机上的表现感到非常惊讶。事实上，在某个方面，它比我想象的要好得多：我们目前正在开发一些游戏，并且遇到了 iOS9 Safari 的问题，这使得在加载游戏时很难隐藏地址栏。iOS7允许一些滚动黑客，但那些被删除了，直到今天我认为在那个浏览器中“强制”全屏是不可能的。然而，这个涂鸦做得很完美。
我试图找出发生了什么，但我想我忽略了一些东西。它不能是 HTML5 全屏 API（涂鸦使用），因为 Safari 不支持： http: //caniuse.com/#feat=fullscreen
有没有人有任何提示？