标签: html5-fullscreen
requestFullscreen 多个元素
假设您正在使用 HTML5 视频播放器库，例如 Videojs。您想通过添加一个额外的按钮来扩展这个库的功能，但由于与这个问题无关的原因，您不想进入整个插件编码业务，所以您只需将播放器放入容器内并添加一个绝对定位的按钮按钮，例如：
<div class="player-container">
<video class="video-js"></video>
<button type="button" class="absolutely-positioned"></button>
</div>
问题是，在某些时候您可能会单击播放器的全屏按钮，这将调用requestFullscreen视频元素并且仅调用视频元素。这意味着您的按钮或该容器上的其他任何内容都不会处于全屏模式。
z-index在 webkit 浏览器上，您可以通过将全屏模式下的视频元素设置为等于或更高，使其他元素在全屏上保持可见。在 Firefox 上，该元素需要更改为position: fixed（但您不能使用-moz-full-screen前缀来设置其样式，因为该元素不会被识别为处于全屏模式），而在 IE 上，它根本不可见。
我试图找出全屏模式是否仅限于单个元素（及其子元素），或者是否可以同时拥有多个全屏元素。还有其他人遇到过类似的事情吗？有什么解决方法吗？
推荐指数
解决办法
查看次数
在 MS IE11 中启用全屏时无法滚动 <body>
我有一个使用 Bootstrap3 具有固定页眉和页脚的页面。下面的内容是可滚动的。用户可以通过 F11 或按钮（使用 FullScreen-API）启用全屏模式。这在 Chrome 和 FF 中工作正常，但在 IE11 中出现问题。F11 全屏效果总是很好。但是使用 javascript 切换全屏模式会导致我的页面在使用 IE11 时被放置在顶部底部，并且宽度和高度缩小。我的页眉和页脚保持不变。
<body>
<header>Fixed</header>
<main>Scrollable</main>
<footer>Fixed</footer>
</body>
我创建了一个小小提琴，可以显示我在做什么。不幸的是，全屏不会在 JSFiddle 中切换，因此最好将代码复制到其他地方： https: //jsfiddle.net/j122kdju/
这是该网站的两个屏幕截图。我给 html 设置了绿色背景色，以查看通过 JS API 启用全屏时发生的情况。第一张图显示了 IE11 中没有全屏的页面：
第二个显示通过 IE11 中的 JS API 启用全屏：
我可以通过将 css 中的 html 宽度设置为 100% 来解决这个问题。无论如何，溢出的页面就不能再滚动了。滚动条不可见。如前所述，这在其他浏览器中运行良好。
有没有可用的解决方法？我在这里错过了什么吗？谢谢
编辑：也许相关：IE 在全屏模式下无法滚动
推荐指数
解决办法
查看次数
JavaScript全屏无法滚动
我使用下面的脚本对页面进行了全屏切换，但是当页面全屏时出现问题，它无法向下滚动。我尝试添加 CSSoverflow: scroll以实现全屏显示，但没有任何反应。
我希望有人能帮助我解决这个问题。谢谢。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="script.js"></script>
</head>
<body>
<button id="btnScreen"><i class="icon-enlarge"></i></button>
<div style="height:1000px">Some Text</div>
</body>
</html>
JavaScript：
var goInFullscreen = function(element) {
if (element.requestFullscreen)
element.requestFullscreen();
else if (element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if (element.webkitRequestFullscreen)
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
else if (element.msRequestFullscreen)
element.msRequestFullscreen();
}
var goOutFullscreen = function() {
if (document.exitFullscreen)
document.exitFullscreen();
else if (document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if (document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if (document.msExitFullscreen)
document.msExitFullscreen(); …推荐指数
解决办法
查看次数
使用iOS Safari Web浏览器的全屏html5视频
有没有一种方法可以在iOS Safari（移动网络）上触发全屏。全屏或全视口都很棒。这是我在下面尝试过的：
<video id="mobile_content">
<source src="someurltocontent"></source>
</video>
function makefullscreen(element){
if(element.requestFullscreen) {
element.requestFullscreen();
}
else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
else{
var requestFullscreen =
document.documentElement.requestFullscreen ||
document.documentElement.webkitRequestFullscreen ||
document.documentElement.mozRequestFullscreen ||
document.documentElement.requestFullScreen ||
document.documentElement.webkitRequestFullScreen ||
document.documentElement.mozRequestFullScreen;
if (requestFullscreen) {
requestFullscreen.call(document.documentElement);
}
else {
console.log("really!? come on...");
}
}
}
根据用户操作，上述功能会传递一个视频元素，如果可以使用全屏，则在视频元素上执行全屏。
这不适用于Safari for IPAD。
一种解决方法是将控件attr应用于视频标签，然后让用户使用本机播放器全屏启动全屏。
<video id="mobile_content" controls>
<source src="someurltocontent"></source>
</video>
除上述内容外，还有其他想法吗？
推荐指数
解决办法
查看次数
requestFullscreen 后等待回流结束
好吧，伙计们，姑娘们，对于你们所有的巫师来说，这是一个棘手的问题......
我正在开发一个沉浸式网络应用程序，该应用程序会覆盖移动设备上的默认触摸滚动行为。内容被划分为使用 100% 视口的页面，并且通过在页面之间上下滑动来处理导航。
第一次滑动时，我调用requestFullscreen()该body元素，这当然会在视口调整大小时导致回流。问题是我也希望第一次滑动来触发自定义滚动行为，但我正在使用Element.nextElementSibling.scrollIntoView({ block : start, behavior : 'smooth' })，直到回流完成，下一页的顶部边缘（ ）HTMLSectionElement已经可见，因此滚动不会发生。
如果我习惯setTimeout等待大约 600 毫秒直到回流完成，滚动效果会按预期工作，但我对这种 hacky 解决方法不满意，我更喜欢使用更优雅的异步解决方案。
我首先尝试从 requestFullscreen 返回的 Promise 执行器内部触发滚动效果，resolve但这没有帮助。这个承诺在执行流程的早期就得到了解决。
然后我从事件处理程序内部尝试fullscreenchange。这里也不走运，因为该事件在全屏更改发生之前立即触发。
最后，我尝试从窗口resize事件处理程序内部进行尝试，但这会在回流发生之前触发。我requestIdleCallback也在这里添加了一个，但没有任何区别。
所以我的问题是......有没有可靠的方法来检测回流操作的结束？或者...是否有人有更好的 B 计划，而不是放弃使用scrollIntoView我自己的滚动效果并将其编码到窗口调整大小处理程序中。
推荐指数
解决办法
查看次数