全屏指南

对于一个你想要以全屏模式展示的元素（例如 <video> ），你通过调用它的 Element.requestFullscreen() 方法就能简单地激活它的全屏模式。

我们来看看 <video> 这个元素：

<video controls id="myvideo">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>
我们可以用下面的代码让视频进入全屏模式：
js




    
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
这段代码会在调用 requestFullscreen() 方法之前先检验它是否存在。

值得留意的是，目前 Gecko 和 WebKit 的实现之间的关键差异：Gecko 自动为元素添加了 CSS 规则，使其拉伸以填满屏幕： " width: 100%; height: 100% "。WebKit 没有这样做，相反地，它将全屏元素居中，不改变大小，而屏幕的其他部分为黑色。为了在 Webkit 中获得相同的全屏行为，你需要自行为元素添加 CSS " width: 100%; height: 100%; "：

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
另一方面，如果你尝试在在 Gecko 上模拟 WebKit 的行为，你需要把你想要呈现的元素放在另一个实际调整为全屏幕的元素中，并使用 CSS 规则调整内部的元素，从而达到你想要的样式。

当成功进入全屏模式时，包含该元素的文档会收到一个 fullscreenchange 事件。当退出全屏模式时，文档会再一次收到 fullscreenchange 事件。注意此 fullscreenchange 事件，不管在文档进入和退出全屏模式时，都不会提供任何信息，但如果文档的 fullscreenElement 为非空（ null ），即处于全屏模式中。

你并不总是可以进入全屏模式。例如 <iframe> 元素具有 allowfullscreen 属性，可选择是否将其内容以全屏模式显示。另外，几种特定的内容，比如窗体插件（windowed plug-ins），不能以全屏模式显示。尝试将不能以全屏模式显示的元素（或者此元素的父元素和后代元素）的时候，全屏请求是无效的。而相应元素会收到一个 mozfullscreenerror 事件。当全屏请求失败时，Firefox 会在 Web 控制台上打一条错误信息解释请求为什么失败。但是在 Chrome 和新版的 Opera 中，不会生成这样的警告。