Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

जावास्क्रिप्ट के साथ फुलस्क्रीन विंडो कैसे बनाएं?

<घंटा/>

जावास्क्रिप्ट के साथ एक पूर्ण स्क्रीन विंडो बनाने के लिए, कोड इस प्रकार है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
   body{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   button{
      display: block;
      padding:10px;
      margin:10px;
      background-color: rgb(81, 0, 128);
      border:none;
      color:white;
   }
</style>
<body>
<h1>Fullscreen Window with JavaScript Example</h1>
<button class="openVideo";">Open Video in Fullscreen Mode</button>
<video width="500px" controls id="minimizedVideo">
<source
src="https://www.videvo.net/videvo_files/converted/2015_04/preview/Ocean_Waves_slow_motion_videvo.mov44965.webm">
</video>
<h2>Click on the above button to open it in fullscreen</h2>
<script>
   document.querySelector('.openVideo').addEventListener('click',fullscreenVideo);
   var elem = document.getElementById("minimizedVideo");
   function fullscreenVideo() {
      if (elem.requestFullscreen) {
         elem.requestFullscreen();
      }
      else if (elem.mozRequestFullScreen) {
         elem.mozRequestFullScreen();
      }
      else if (elem.webkitRequestFullscreen) {
         elem.webkitRequestFullscreen();
      }
      else if (elem.msRequestFullscreen) {
         elem.msRequestFullscreen();
      }
   }
</script>
</body>
</html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

जावास्क्रिप्ट के साथ फुलस्क्रीन विंडो कैसे बनाएं?

"वीडियो को फुलस्क्रीन मोड में खोलें" बटन पर क्लिक करने पर -

जावास्क्रिप्ट के साथ फुलस्क्रीन विंडो कैसे बनाएं?


  1. जावास्क्रिप्ट के साथ स्वत:पूर्ण कैसे बनाएं? जावास्क्रिप्ट के साथ स्वत:पूर्ण कैसे बनाएं?

    किसी प्रपत्र में स्वत:पूर्णता बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style>    * {       box-sizing: border-box;  

  1. जावास्क्रिप्ट के साथ टेक्स्ट को कैसे टॉगल करें? जावास्क्रिप्ट के साथ टेक्स्ट को कैसे टॉगल करें?

    जावास्क्रिप्ट के साथ टेक्स्ट को टॉगल करने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe

  1. जावास्क्रिप्ट के साथ एनिमेटेड प्रभाव बनाने के लिए आइकन का उपयोग कैसे करें? जावास्क्रिप्ट के साथ एनिमेटेड प्रभाव बनाने के लिए आइकन का उपयोग कैसे करें?

    एनिमेटेड प्रभाव बनाने के लिए आइकन का उपयोग करने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style>    #user {       font-size: 60px;       color:rgb(106, 33, 201);    }    body {     &n