CSS HTML JavaScript Programming Language

อยากทำ FullScreen Video ต้องทำยังไง

BorntoDev

เผยแพร่เมื่อ 24 สิงหาคม 2023

478 การเข้าชม

สารจากนักเขียน

พบกันอีกเช่นเคย ในวันนี้ผมจะพามาลองเขียน FullScreen Window ไว้สำหรับขยาย Video Player ของเราให้เต็มจอกันจะมีขั้นตอนอะไรบ้างมาดูกัน🧑‍💻

เริ่มด้วยการสร้าง TestFullVideo.html ขึ้นมาก่อนเลย

ให้เพื่อน ๆ พิมพ์ doc จะได้โครง HTML ขึ้นมาแล้วทำตาม Code ด้านล่างได้เลยนะครับ

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  
    /* Style the fullscreen button */
    #fullscreenBtn {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      background-color: #333;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  
    /* Style the video */
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  
    /* Style the fullscreen button */
    #fullscreenBtn {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      background-color: #333;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  
    /* Style the video */
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

JavaScript

ส่วนแรกผมจะทำ CSS ก่อนที่จัด Body และปุ่มกดไป FullScreen ตามด้วย video เอาไว้และเปิด <body> ขึ้นมา

<!-- Add a button to toggle fullscreen mode -->
<button id="fullscreenBtn">FullScreen Mode OFF</button>

<!-- Add a video element From Path File in same Directory -->
<video id="myVideo" controls>
   <source src="ReviewDekHor.mp4" type="video/mp4">
</video>

<!-- Add a button to toggle fullscreen mode -->
<button id="fullscreenBtn">FullScreen Mode OFF</button>

<!-- Add a video element From Path File in same Directory -->
<video id="myVideo" controls>
   <source src="ReviewDekHor.mp4" type="video/mp4">
</video>

HTML

จากนั้นให้สร้างปุ่มสำหรับเข้า FullScreen เอาไว้ และตามด้วยการไปดึง File จาก Path Video ของเรา

อย่าลืมเช็คให้ Path ตรงกับตำแหน่ง File ของเราด้วยนะครับ

<script>
  const fullscreenBtn = document.getElementById('fullscreenBtn');
  const body = document.body;
  const video = document.getElementById('myVideo');
  
  fullscreenBtn.addEventListener('click', () => {
    if (!document.fullscreenElement) {
      // If no element is in fullscreen, make the body go fullscreen
      if (body.requestFullscreen) {
      body.requestFullscreen();
      } else if (body.mozRequestFullScreen) {
      body.mozRequestFullScreen();
      } else if (body.webkitRequestFullscreen) {
      body.webkitRequestFullscreen();
      } else if (body.msRequestFullscreen) {
      body.msRequestFullscreen();
      }
  
      fullscreenBtn.textContent = 'FullScreen Mode ON';
    } else {
        // If an element is in fullscreen, exit fullscreen mode
        if (document.exitFullscreen) {
        document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        }
        fullscreenBtn.textContent = 'FullScreen Mode OFF';
    }
  });
</script>
</body>
</html>

<script>
  const fullscreenBtn = document.getElementById('fullscreenBtn');
  const body = document.body;
  const video = document.getElementById('myVideo');
  
  fullscreenBtn.addEventListener('click', () => {
    if (!document.fullscreenElement) {
      // If no element is in fullscreen, make the body go fullscreen
      if (body.requestFullscreen) {
      body.requestFullscreen();
      } else if (body.mozRequestFullScreen) {
      body.mozRequestFullScreen();
      } else if (body.webkitRequestFullscreen) {
      body.webkitRequestFullscreen();
      } else if (body.msRequestFullscreen) {
      body.msRequestFullscreen();
      }
  
      fullscreenBtn.textContent = 'FullScreen Mode ON';
    } else {
        // If an element is in fullscreen, exit fullscreen mode
        if (document.exitFullscreen) {
        document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
        }
        fullscreenBtn.textContent = 'FullScreen Mode OFF';
    }
  });
</script>
</body>
</html>

HTML

จากนั้นมาเข้าส่วน กันโดยในที่นี้ผมจะประกาศตัวแปร 3 ตัวด้วยกันคือ

fullScreenBtn เก็บปุ่มกด
body ส่วน body หลัก
video ดึงไฟล์มาแสดง Video

โดยเริ่มจากส่วนปุ่มกดที่ผมจะตั้งเงื่อนไขไว้โดยเมื่อกดปุ่มก็จะเรียกใช้คำสั่ง เพื่อแสดง Video แบบเต็มจอ และเปลี่ยน Text จาก FullScreen Mode OFF → FullScreen Mode ON

จากนั้นก็ดักเงื่อนไขนอกเหนือจากนั้นด้วยว่าหากกดที่ปุ่มเดิมอีกรอบก็จะออกจาก FullScreen Mode และเปลี่ยน Text เป็น FullScreen Mode ON → FullScreen Mode OFF

โดยโค้ดทั้งหมดก็จะหน้าตาเป็นแบบนี้เลย

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    /* Style the fullscreen button */
    #fullscreenBtn {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      background-color: #333;
      color: #fff;
      border: none;
      cursor: pointer;
    }
    
    /* Style the video */
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

  <!-- Add a button to toggle fullscreen mode -->
  <button id="fullscreenBtn">FullScreen Mode OFF</button>
  
  <!-- Add a video element From Path File in same Directory -->
  <video id="myVideo" controls>
     <source src="ReviewDekHor.mp4" type="video/mp4">
  </video>
  <script>
    const fullscreenBtn = document.getElementById('fullscreenBtn');
    const body = document.body;
    const video = document.getElementById('myVideo');
    
    fullscreenBtn.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        // If no element is in fullscreen, make the body go fullscreen
        if (body.requestFullscreen) {
        body.requestFullscreen();
        } else if (body.mozRequestFullScreen) {
        body.mozRequestFullScreen();
        } else if (body.webkitRequestFullscreen) {
        body.webkitRequestFullscreen();
        } else if (body.msRequestFullscreen) {
        body.msRequestFullscreen();
        }
    
        fullscreenBtn.textContent = 'FullScreen Mode ON';
      } else {
          // If an element is in fullscreen, exit fullscreen mode
          if (document.exitFullscreen) {
          document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
          }
          fullscreenBtn.textContent = 'FullScreen Mode OFF';
      }
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    /* Style the fullscreen button */
    #fullscreenBtn {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 9999;
      background-color: #333;
      color: #fff;
      border: none;
      cursor: pointer;
    }
    
    /* Style the video */
    video {
      width: 100%;
      height: auto;
    }
  </style>
</head>
<body>

  <!-- Add a button to toggle fullscreen mode -->
  <button id="fullscreenBtn">FullScreen Mode OFF</button>
  
  <!-- Add a video element From Path File in same Directory -->
  <video id="myVideo" controls>
     <source src="ReviewDekHor.mp4" type="video/mp4">
  </video>
  <script>
    const fullscreenBtn = document.getElementById('fullscreenBtn');
    const body = document.body;
    const video = document.getElementById('myVideo');
    
    fullscreenBtn.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        // If no element is in fullscreen, make the body go fullscreen
        if (body.requestFullscreen) {
        body.requestFullscreen();
        } else if (body.mozRequestFullScreen) {
        body.mozRequestFullScreen();
        } else if (body.webkitRequestFullscreen) {
        body.webkitRequestFullscreen();
        } else if (body.msRequestFullscreen) {
        body.msRequestFullscreen();
        }
    
        fullscreenBtn.textContent = 'FullScreen Mode ON';
      } else {
          // If an element is in fullscreen, exit fullscreen mode
          if (document.exitFullscreen) {
          document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
          } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
          }
          fullscreenBtn.textContent = 'FullScreen Mode OFF';
      }
    });
  </script>
</body>
</html>

HTML

เสร็จแล้วให้เพื่อน ๆ ลอง Run ผลลัพธ์ทดสอบดูก็จะได้หน้าตาแบบนี้เลย

เมื่อลองกดปุ่มขวาบน ข้อความที่แสดงก็จะเปลี่ยนไปด้วยเพื่อบอกเราว่าตอนนี้กำลังเปิดแบบเต็มจออยู่

เพียงเท่านี้เราก็จะสามารถเล่น Video Player แบบ FullScreen ได้แล้วเรียกได้ว่าเป็นอะไรที่ดูดีฝุด ๆ ไปเลย😁

สุดท้ายนี้ถ้าเพื่อน ๆ ชื่นชอบบทความนี้และคิดว่าเป็นประโยชน์ก็อย่าลืมกด ❤ ให้กัน เพื่อที่จะได้ไม่พลาดความรู้ใหม่ ๆ ที่ส่งตรงถึงที่ให้กันแบบฟรี ๆ ไปเลย และในครั้งหน้าจะเป็นเรื่องอะไรอีกอย่าลืมติดตามกันไว้ ในตอนนี้ผมก็ต้องขอตัวลาไปก่อนละค้าบ ฟิ่วว🛴…
.

ขอบคุณที่เข้ามาอ่านกันนะครับ🙏

🦖 borntoDev – สร้างการเรียนรู้ที่ดี สำหรับสายไอทีในทุกวัน