revision:
The Element.requestFullscreen() method issues an asynchronous request to make the element be displayed in fullscreen mode.
It's not guaranteed that the element will be put into full screen mode. If permission to enter full screen mode is granted, the returned "Promise" will resolve and the element will receive a fullscreenchange event to let it know that it's now in full screen mode. If permission is denied, the promise is rejected and the element receives a "fullscreenerror" event instead. If the element has been detached from the original document, then the document receives these events instead.
requestFullscreen()
requestFullscreen(options)
Parameters:
options : optional. An object that controls the behavior of the transition to fullscreen mode. The available options are:
- navigationUI Optional : controls whether or not to show navigation UI while the element is in fullscreen mode. The default value is "auto", which indicates that the browser should decide what to do.
- "hide" : the browser's navigation interface will be hidden and the entire dimensions of the screen will be allocated to the display of the element.
- "show" : the browser will present page navigation controls and possibly other user interface; the dimensions of the element (and the perceived size of the screen) will be clamped to leave room for this user interface.
- "auto" : the browser will choose which of the above settings to apply. This is the default value.
function toggleFullscreen() {
let elem = document.querySelector("video");
if (!document.fullscreenElement) {
elem.requestFullscreen().catch((err) => {
alert(
`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`
);
});
} else {
document.exitFullscreen();
}
}
let elem = document.documentElement;
elem
.requestFullscreen({ navigationUI: "show" })
.then(() => {})
.catch((err) => {
alert(
`An error occurred while trying to switch into fullscreen mode: ${err.message} (${err.name})`
);
});
Click on the button to open the video in fullscreen mode.
Tip: Press the "Esc" key to exit full screen.
<div>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<video width="100%" controls id="myvideo">
<source src="Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script>
/* Get the element you want displayed in fullscreen */
var elem = document.getElementById("myvideo");
/* Function to open fullscreen mode */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.
<div>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode.
Close it by either clicking the "Esc" key on your keyboard, or with the
"Close Fullscreen" button.</p>
<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>
</div>
<script>
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.
<div>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode.
Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>
<button class="btn-a" onclick="openFullscreen2();">Open Fullscreen</button><br><br>
<button class="btn-a" onclick="closeFullscreen2();">Close Fullscreen</button>
</div>
<style>
/* Safari */
:-webkit-full-screen { background-color: yellow;}
/* IE11 syntax */
:-ms-fullscreen {background-color: yellow;}
/* Standard syntax */
:fullscreen {background-color: yellow;}
/* Style the button */
button.btn-a{padding: 2vw;font-size: 1.5vw;
}
</style>
<script>
var elem = document.documentElement;
function openFullscreen2() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
function closeFullscreen2() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>