การคัดลอกรหัสมีดังนี้:
// ตัดสินเบราว์เซอร์ต่างๆและค้นหาวิธีที่ถูกต้อง
ฟังก์ชั่น LaunchFullScreen (องค์ประกอบ) {
if (element.requestfullscreen) {
Element.requestfullscreen ();
} อื่นถ้า (element.mozrequestfullscreen) {
Element.mozrequestfullscreen ();
} อื่นถ้า (element.webkitrequestfullscreen) {
element.webkitrequestfullscreen ();
} อื่นถ้า (element.msrequestfullscreen) {
Element.msrequestfullscreen ();
-
-
// เริ่มเต็มหน้าจอ!
LaunchfullScreen (Document.DocumentElement);
LaunchfullScreen (document.getElementById ("Videolement"));
โทรหาวิธีการแบบเต็มหน้าจอในองค์ประกอบหน้าคุณต้องการแสดงในเต็มหน้าจอและหน้าต่างเบราว์เซอร์จะกลายเป็นหน้าจอเต็มรูปแบบ แต่ผู้ใช้จะร้องขอก่อนที่จะอนุญาตโหมดเต็มหน้าจอ โปรดทราบว่าผู้ใช้มีแนวโน้มที่จะปฏิเสธโหมดเต็มหน้าจอ หากผู้ใช้รันโหมดเต็มหน้าจอแถบเครื่องมือของเบราว์เซอร์และเมนูปุ่มอื่น ๆ จะถูกซ่อนไว้และหน้าเว็บของคุณจะครอบคลุมทั้งหน้าจอ
ออกจากโหมดเต็มหน้าจอ
วิธีการออกจากระบบนี้ (ซึ่งต้องใช้คำนำหน้าเบราว์เซอร์) จะทำให้เบราว์เซอร์ออกจากโหมดเต็มหน้าจอและกลายเป็นโหมดปกติ
การคัดลอกรหัสมีดังนี้:
// กำหนดประเภทเบราว์เซอร์
ฟังก์ชั่น ExitFullScreen () {
if (document.exitfullscreen) {
document.exitfullscreen ();
} อื่นถ้า (document.mozcancelfullscreen) {
document.mozcancelfullscreen ();
} อื่นถ้า (document.webkitexitfullscreen) {
document.webkitexitfullscreen ();
-
-
// ออกจากโหมดเต็มหน้าจอ!
Exitfullscreen ();
ควรสังเกตว่าการออกจากหน้าจอสามารถเรียกได้โดยวัตถุเอกสารแทนที่จะเป็นวัตถุที่ส่งผ่านเมื่อเริ่มต้นเต็มหน้าจอ
คุณสมบัติและกิจกรรมเต็มหน้าจอ
น่าเสียดายที่คุณสมบัติเต็มหน้าจอและวิธีการที่เกี่ยวข้องสำหรับกิจกรรมยังต้องใช้คำนำหน้าเบราว์เซอร์ แต่ฉันเชื่อว่าสิ่งนี้จะไม่จำเป็นในไม่ช้า
1.Document.FullScreenelement: องค์ประกอบหน้าจอเต็มหน้าจอ
2.Document.FullScreenenabled: กำหนดว่าปัจจุบันอยู่ในเต็มหน้าจอหรือไม่
เหตุการณ์ FullScreenchange จะถูกทริกเกอร์เมื่อ Fullscreen เริ่มต้นหรือออก:
การคัดลอกรหัสมีดังนี้:
var fullscreenelement = document.fullscreenelement || document.mozfullscreenelement ||
var fullscreenenable = document.fullscreenenabled || document.mozfullscreenenabled ||
คุณยังสามารถนำหน้าเหตุการณ์นี้โดยใช้วิธีข้างต้นเพื่อกำหนดประเภทเบราว์เซอร์
CSS สไตล์หน้าจอเต็มรูปแบบ
เบราว์เซอร์ต่างๆให้กฎสไตล์ CSS ที่มีประโยชน์มากในโหมดเต็มหน้าจอ:
คัดลอกรหัสดังนี้ ::-WebKit-Full-Screen {
/* คุณสมบัติ */
-
: -moz-full-screen {
/* คุณสมบัติ */
-
: -ms-fullscreen {
/* คุณสมบัติ */
-
: เต็มหน้าจอ { / *pre-spec * /
/* คุณสมบัติ */
-
: FullScreen { / * spec * /
/* คุณสมบัติ */
-
/ * องค์ประกอบที่ลึกกว่า */
: -webkit-full-screen video {
ความกว้าง: 100%;
ความสูง: 100%;
-
/* จัดแต่งทรงผมฉากหลัง*/
:: ฉากหลัง {
/* คุณสมบัติ */
-
::-ms-backdrop {
/* คุณสมบัติ */
-
ในบางกรณีมีปัญหาบางอย่างเกี่ยวกับสไตล์ WebKit และคุณควรทำให้สไตล์เหล่านี้ง่ายขึ้น
API แบบเต็มหน้าจอเหล่านี้เรียบง่ายและมีประโยชน์มาก ครั้งแรกที่ฉันเห็น API นี้ในการสาธิต Bananabread ของ MDN มันเป็นเกมถ่ายภาพที่เพิ่งเกิดขึ้นเป็นหน้าจอเต็มหน้าจอซึ่งใช้เหตุการณ์การฟังเพื่อตรวจจับสถานะเต็มหน้าจอ โปรดจำไว้ว่า API ที่มีประโยชน์เหล่านี้คุณสามารถรับได้เมื่อคุณต้องการ