2020 answer
HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen API defines an API for elements to display themselves fullscreen.
This can be applied to any element, including videos.
Browser support is good, but Internet Explorer and Safari need prefixed versions.
An external demo is provided as Stack Snippet sandboxing rules break it.
<div id="one">
One
</div>
<div id="two">
Two
</div>
<button>one</button>
<button>two</button>
div {
width: 200px;
height: 200px;
}
#one { background: yellow; }
#two { background: pink; }
addEventListener("click", event => {
const btn = event.target;
if (btn.tagName.toLowerCase() !== "button") return;
const id = btn.textContent;
const div = document.getElementById(id);
if (div.requestFullscreen)
div.requestFullscreen();
else if (div.webkitRequestFullscreen)
div.webkitRequestFullscreen();
else if (div.msRequestFullScreen)
div.msRequestFullScreen();
});
2012 answer
HTML 5 provides no way to make a video fullscreen, but the parallel Fullscreen specification supplies the requestFullScreen
method which allows arbitrary elements (including <video>
elements) to be made fullscreen.
It has experimental support in a number of browsers.
2009 answer
Note: this has since been removed from the specification.
From the HTML5 spec (at the time of writing: June '09):
User agents should not provide a
public API to cause videos to be shown
full-screen. A script, combined with a
carefully crafted video file, could
trick the user into thinking a
system-modal dialog had been shown,
and prompt the user for a password.
There is also the danger of "mere"
annoyance, with pages launching
full-screen videos when links are
clicked or pages navigated. Instead,
user-agent specific interface features
may be provided to easily allow the
user to obtain a full-screen playback
mode.
Browsers may provide a user interface, but shouldn't provide a programmable one.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…