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

BorntoDev

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

334 การเข้าชม

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

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

เขียนโดย
Chairawit Iamkhajornchai
Internship @ borntoDev

บทความนี้ตีพิมพ์ และ เผยแพร่เมื่อ 24 สิงหาคม 2566

เริ่มด้วยการสร้าง 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>

ส่วนแรกผมจะทำ 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>

จากนั้นให้สร้างปุ่มสำหรับเข้า 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>

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

1.fullScreenBtn เก็บปุ่มกด

2.body ส่วน body หลัก

3.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>

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

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

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

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

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

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