วิธีการสร้างโซนจอเต็ม

เรียนรู้วิธีการสร้างหน้าโซนจอเต็มด้วย JavaScript

หน้าโซนจอเต็ม

วิธีการใช้ JavaScript แสดงส่วนที่เลือกในโซนจอเต็ม

คลิกปุ่มเพื่อเปิดวิดีโอในโซนจอเต็ม:

ทดลองด้วยตัวเอง

วิดีโอโซนจอเต็ม

เพื่อเปิดโซนจอเต็มส่วนที่เลือก พวกเราใช้ element.requestFullscreen() วิธี:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

เอกสารโซนจอเต็ม

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

ในตัวอย่างนี้ เรายังใช้ฟังก์ชันปิดเพื่อออกจากโซนจอเต็มทั้งหมด:

ตัวอย่าง

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

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

ตัวอย่าง

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* สyntax มาตรฐาน */
:fullscreen {
  background-color: yellow;
}

ทดลองด้วยตัวเอง

หน้าที่เกี่ยวข้อง

คู่มือ HTML DOM:วิธีการ requestFullscreen()

คู่มือ HTML DOM:วิธีการ exitFullscreen()

คู่มือ HTML DOM:วิธีการ documentElement