使用 Javascript 以编程方式将 Google Chrome 置于全屏模式？

Posted 2023-05-07

【中文标题】使用 Javascript 以编程方式将 Google Chrome 置于全屏模式？

【英文标题】：Programmatically put Google Chrome into full-screen mode with Javascript?

【发布时间】：2011-12-22 09:28:35

【问题描述】：

我最近在 youtube 上单击 youtube 视频的全屏按钮，屏幕顶部出现一条消息，说我已进入全屏模式。此消息是您在键盘上按 f-11 时收到的本机消息。我还在某处（我现在找不到）读到一些东西，说现在可以使用 javascript 来做到这一点。

问题

如何根据命令将用户浏览器（Google Chrome）全屏显示？ - 如果没有扩展，他们需要事先下载，或者任何类似的东西。

我正在使用 jQuery，所以这会是最好的，但我根本找不到怎么做。

编辑：我见过其他类似的问题，但很久以前就有人问过了，我相信这个功能是相当新的。

【问题讨论】：

您是否有指向执行此操作的 YouTube 视频的链接？你确定不是 Flash 吗？

这不是flash的全屏模式吗？

Is there a way to make html5 video fullscreen? 的可能重复项

这个问题没有足够的jQuery。

我从 youtube 收到的全屏消息与按 F11 收到的消息不同

【参考方案1】：

这是一篇好文章：Native Fullscreen JavaScript API。它描述了所有三种方法：webkit、firefox 和 W3-proposal。

// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen(); 

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen(); 
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

【参考方案2】：

试试这些功能，它们似乎是原生的：

void webkitRequestFullScreen();
void webkitRequestFullScreenWithKeys();
void webkitCancelFullScreen(); // only on Document

【参考方案3】：

API 仍然在不断变化，尤其是在本周加入 W3C 之后。我花了一些时间来解决这些差异，以便在 MediaElement.js HTML5 视频播放器中实现全屏，并且它在 Safari 5.1+、Chrome 15+ 或 Firefox Nightly 中运行良好。