วิธีการ requestFullscreen() ของ Fullscreen API

คำนิยามและวิธีใช้

requestFullscreen() วิธีการเปิดออบเจ็ตในโซนจอเต็ม

คำแนะนำ:โปรดใช้ วิธีการ exitFullscreen()ยกเลิกโซนจอเต็ม

ตัวอย่าง

ตัวอย่าง 1

แสดงออบเจ็ต <video> ในโซนจอเต็ม:

/* ดึงออบเจ็ตที่ต้องการแสดงในโซนจอเต็ม (วิดีโอในตัวอย่างนี้): */
var elem = document.getElementById("myvideo");
/* ระหว่างที่ปฏิบัติการฟังก์ชัน openFullscreen() จะเปิดโซนจอเต็มเพื่อเล่นวิดีโอ */
โปรดจำได้ว่า เราต้องมีเนื้อหาหน้าต่าง ๆ ของเว็บเบราเซอร์ต่าง ๆ เพราะยังไม่สนับสนุนคุณสมบัติ requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

ลองเดาเอง

ตัวอย่าง 2

เพื่อเปิดหน้าเว็บ HTML ในโซนจอเต็มทั้งหมด ให้ใช้ document.documentElement แทนด้วย document.getElementById("element") ในตัวอย่างนี้ เรายังใช้ฟังก์ชันปิดที่ใช้เพื่อปิดโซนจอเต็ม:

/* รับ documentElement (<html>) ให้แสดงหน้าเว็บในโหมดจอแบบเต็มจอ */
var elem = document.documentElement;
/* มองเต็มจอ */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* ปิดโหมดจอแบบเต็มจอ */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

ลองเดาเอง

ตัวอย่าง 3

เมื่อหน้าเว็บอยู่ในโหมดจอแบบเต็มจอ คุณยังสามารถตั้งรูปแบบหน้าเว็บด้วย CSS ได้:

/* รูปแบบ Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* รูปแบบ IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* รูปแบบมาตรฐาน */
:fullscreen {
  background-color: yellow;
}

ลองเดาเอง

รูปแบบการใช้

HTMLElementObject.requestFullscreen()

ตัวแปร

ไม่มี

รายละเอียดเทคนิค

ค่าที่คืน: ไม่มีค่าที่คืน

การสนับสนุนของบราวเซอร์

ตัวเลขในตารางบอกว่าอุปกรณ์ที่สนับสนุนวิธีนี้ครบเพื่อการใช้งานครั้งแรก

หมายเหตุ：บราวเซอร์บางตัวต้องใช้รูปแบบหน้าตัวอย่างพิเศษ (ดูที่วงเล็บ)

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)