कैसे करें - फुलस्क्रीन
जावास्क्रिप्ट के साथ फुलस्क्रीन विंडो बनाने का तरीका जानें।
फ़ुलस्क्रीन विंडो
किसी एलीमेंट को फ़ुलस्क्रीन मोड में देखने के लिए जावास्क्रिप्ट का उपयोग कैसे करें।
वीडियो को फ़ुलस्क्रीन मोड में खोलने के लिए बटन पर क्लिक करें:
फ़ुलस्क्रीन वीडियो
पूर्णस्क्रीन में एक तत्व खोलने के लिए, हम element.requestFullscreen()
विधि का उपयोग करते हैं:
उदाहरण
<script>
/* Get the element you want displayed in fullscreen mode (a
video in this example): */
var elem = document.getElementById("myvideo");
/* When the openFullscreen() function is executed, open the video in
fullscreen.
Note that we must include prefixes for different browsers, as
they don't support the requestFullscreen method yet */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else
if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
फ़ुलस्क्रीन दस्तावेज़
पूरे पृष्ठ को फ़ुलस्क्रीन में खोलने के लिए के document.documentElementबजाय का उपयोग करें । इस उदाहरण में, हम फ़ुलस्क्रीन को बंद करने के लिए क्लोज फ़ंक्शन का भी उपयोग करते हैं:document.getElementById("element")
उदाहरण
<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen)
{ /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
जब पेज फ़ुलस्क्रीन मोड में हो तो आप उसे स्टाइल करने के लिए CSS का भी उपयोग कर सकते हैं:
उदाहरण
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
संबंधित पृष्ठ
एचटीएमएल डोम संदर्भ: अनुरोधफुलस्क्रीन() विधि ।
एचटीएमएल डोम संदर्भ: एग्जिटफुलस्क्रीन () विधि ।
एचटीएमएल डोम संदर्भ: दस्तावेज़ एलिमेंट संपत्ति ।