สารจากนักเขียน
พบกันอีกเช่นเคย ในวันนี้ผมจะพามาลองเขียน 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 – สร้างการเรียนรู้ที่ดี สำหรับสายไอทีในทุกวัน
ระบบฝึกทักษะ การเขียนโปรแกรม
ที่พร้อมตรวจผลงานคุณ 24 ชั่วโมง
- โจทย์ปัญหากว่า 200 ข้อ ที่รอท้าทายคุณอยู่
- รองรับ 9 ภาษาโปรแกรมหลัก ไม่ว่าจะ Java, Python, C ก็เขียนได้
- ใช้งานได้ฟรี ! ครบ 20 ข้อขึ้นไป รับ Certificate ไปเลย !!
