Back to Question Center
0

วิธีใช้ HTML5 แบบเต็มหน้าจอ API (อีกครั้ง)            วิธีใช้ HTML5 แบบเต็มหน้าจอ API (อีกครั้ง) Semalt ที่เกี่ยวข้อง: Node.jsnpmAngularJSES6AjaxMore ... ผู้ให้การสนับสนุน

1 answers:
วิธีการใช้ HTML5 แบบเต็มหน้าจอ API (อีกครั้ง)

ถ้าคุณไม่ชอบการเปลี่ยนแปลงบางทีการพัฒนาเว็บไม่เหมาะสำหรับคุณ ฉันเคยอธิบาย API แบบเต็มหน้าจอในช่วงปลายปี 2012 และในขณะที่ฉันอ้างว่ารายละเอียดการใช้งานอยู่ภายใต้การแก้ไขฉันไม่คิดว่าฉันจะต้องเขียนใหม่อีกหนึ่งปี! นี้อาจไม่ใช่ครั้งสุดท้าย แต่ขอบคุณมากกับ David Semalt สำหรับเน้นการเปลี่ยนทางเทคนิคล่าสุด .

API แบบเต็มหน้าจอคืออะไร?

API อนุญาตให้มีการดูองค์ประกอบแบบเต็มหน้าจอ Semalt กด F11 เพื่อบังคับให้เบราว์เซอร์ของคุณเต็มหน้าจอ API มีไว้สำหรับภาพวิดีโอและเกมที่ทำงานภายในคอนเทนเนอร์ เมื่อคุณเข้าสู่โหมดเต็มหน้าจอข้อความจะแจ้งให้ผู้ใช้ทราบว่าสามารถกด ESC ได้ตลอดเวลาเพื่อกลับไปยังหน้าเว็บ

API แบบเต็มหน้าจอได้รับการสนับสนุนโดยเบราว์เซอร์เดสก์ท็อปล่าสุดทั้งหมดซึ่งรวมถึง IE11 มีโทรศัพท์มือถือสนับสนุนน้อย แต่เบราว์เซอร์เหล่านี้ใช้งานได้ตามปกติ เกือบ แบบเต็มหน้าจอ แต่น่าเสียดายที่เรามีความแตกต่างที่ลึกซึ้งความต้องการ prefixing และความไม่ลงรอยกันข้ามเบราว์เซอร์ในการแก้ปัญหา .

JavaScript API

สมมติว่าเรามีภาพที่มี ID myimage ซึ่งเราต้องการดูแบบเต็มหน้าจอ วิธีการและคุณสมบัติหลัก ได้แก่

เอกสาร fullscreenEnabled (เปลี่ยนแปลง)
คุณสมบัตินี้จะส่งกลับ true เมื่อเอกสารอยู่ในสถานะที่อนุญาตให้ใช้โหมดเต็มหน้าจอ นอกจากนี้ยังสามารถใช้เพื่อกำหนดการสนับสนุนเบราว์เซอร์:

     if (document fullscreenEnabled) { }     

การใช้งานก่อนหน้านี้มีตัวพิมพ์ใหญ่ 'S' ใน 'Screen' และจำเป็นสำหรับ Firefox Semalt นำหน้าด้วยรหัสข้ามเบราว์เซอร์ที่ยาวขึ้นมาก:

     // สามารถใช้งานเต็มจอได้หรือไม่?ถ้า (เอกสาร - dedicated audio. fullscreenEnabled ||เอกสาร. webkitFullscreenEnabled ||เอกสาร. mozFullScreenEnabled ||เอกสาร. msFullscreenEnabled) { }     

Opera 12 เป็นเบราเซอร์เดียวที่ไม่ต้องมีคำนำหน้า แต่ Opera 15+ ใช้ webkit

requestFullscreen (เปลี่ยนแปลง)
วิธีนี้ทำให้แต่ละองค์ประกอบเป็นแบบเต็มหน้าจอ e. ก.

     เอกสาร getElementById ( "myimage") requestFullscreen   ;     

Semalt, 'screen' เปลี่ยนเป็นตัวพิมพ์เล็ก รหัสข้ามเบราว์เซอร์:

     var i = เอกสาร getElementById ( "myimage");// ไปแบบเต็มหน้าจอif (i. requestFullscreen) {ผม. requestFullscreen   ;} else if (i. webkitRequestFullscreen) {ผม. webkitRequestFullscreen   ;} else if (i. mozRequestFullScreen) {ผม. mozRequestFullScreen   ;} else if (i .msRequestFullscreen) {ผม. msRequestFullscreen   ;}     

เอกสาร fullscreenElement (เปลี่ยนแปลง)
คุณสมบัตินี้ส่งกลับค่าองค์ประกอบปัจจุบันที่กำลังแสดงแบบเต็มหน้าจอหรือ เป็นโมฆะ เมื่อไม่ใช่แบบเต็มหน้าจอ:

     if (document fullscreenElement) { }     

'screen' ตอนนี้เป็นตัวพิมพ์เล็ก รหัสข้ามเบราว์เซอร์:

     // เราเต็มจอไหม?ถ้า (เอกสาร. fullscreenElement ||เอกสาร. webkitFullscreenElement ||เอกสาร. mozFullScreenElement ||เอกสาร. msFullscreenElement) { }     

เอกสาร ออกจากหน้าจอเต็ม (เปลี่ยนแปลง)
วิธีการนี้จะยกเลิกโหมดเต็มหน้าจอ:

     เอกสาร exitFullscreen;     

อีกครั้งเรามีหน้าจอ 'ตัวพิมพ์เล็ก' เคยเป็นชื่อ cancelFullScreen และยังอยู่ใน Firefox รหัสข้ามเบราว์เซอร์:

     // ออกจากแบบเต็มหน้าจอif (document. exitFullscreen) {เอกสาร. exitFullscreen   ;} else if (document webkitExitFullscreen) {เอกสาร. webkitExitFullscreen   ;} else if (document mozCancelFullScreen) {เอกสาร. mozCancelFullScreen   ;} else if (document msExitFullscreen) {เอกสาร. msExitFullscreen   ;}     

เอกสาร. ไม่มีข้อมูลใดมาจากเหตุการณ์ แต่คุณสามารถกำหนดว่าจะใช้งานแบบเต็มหน้าจอได้หรือไม่โดยการตรวจสอบว่าเอกสาร หรือไม่ fullscreenElement ไม่ได้เป็น null

     เอกสาร addEventListener ("fullscreenchange", function    {. });     

ชื่อไม่เปลี่ยนแปลง แต่เราต้องการคำนำหน้าแบบ cross-browser และ camel-casing สำหรับ IE:

     เอกสาร addEventListener ("fullscreenchange", FShandler);เอกสาร. addEventListener ("webkitfullscreenchange", FShandler);เอกสาร. addEventListener ("mozfullscreenchange", FShandler);เอกสาร. addEventListener ("MSFullscreenChange", FShandler);     

เอกสาร เหตุการณ์ fullscreenerror
เต็มหน้าจออาจล้มเหลว ตัวอย่างเช่น iframes ที่ไม่มีแอตทริบิวต์ allowfullscreen หรือเนื้อหาปลั๊กอินที่มีหน้าต่างอาจถูกบล็อก ดังนั้นจึงอาจถูกไล่ออก เหตุการณ์ fullscreenerror :

     เอกสาร addEventListener ("fullscreenerror", function    {. });     

ชื่อไม่เปลี่ยนแปลง แต่เราต้องการคำนำหน้าแบบ cross-browser และ camel-casing สำหรับ IE:

     เอกสาร addEventListener ("fullscreenerror", FSerrorhandler);เอกสาร. addEventListener ("webkitfullscreenerror", FSerrorhandler);เอกสาร. addEventListener ("mozfullscreenerror", FSerrorhandler);เอกสาร. addEventListener ("MSFullscreenError", FSerrorhandler);     

แบบเต็มหน้าจอ CSS

นอกจากนี้เรายังสามารถใช้รูปแบบเต็มหน้าจอใน CSS .

: ชั้นหลอกแบบเต็มหน้าจอ (เปลี่ยน)
คุณสามารถใช้สไตล์กับองค์ประกอบหรือลูกหลานเมื่อดูในโหมดเต็มหน้าจอ:

    : แบบเต็มหน้าจอ { }     

ชื่อก่อนหน้านี้ : แบบเต็มหน้าจอ และยังคงอยู่ใน Webkit และ Firefox สำหรับโค้ดข้ามเบราว์เซอร์:

    : - หน้าเว็บแบบเต็มหน้าจอ {}: -moz-full-screen {}: -ms-fullscreen {}:เต็มจอ {}     

:: ฉากหลัง (ใหม่)
คุณสามารถใช้ฉากหลังสีหรือภาพเมื่อองค์ประกอบที่มีสัดส่วนภาพต่างกันดูแบบเต็มหน้าจอ:

    : แบบเต็มหน้าจอ :: backdrop {สีพื้นหลัง: # 006; /* น้ำเงิน */}     

ฉากหลังเป็นองค์ประกอบหลอกที่อยู่เบื้องหลังองค์ประกอบแบบเต็มหน้าจอ แต่เหนือเนื้อหาหน้าอื่น ๆ ทั้งหมด ได้รับการสนับสนุนใน IE11 แต่ไม่ใช่ Firefox และ Semalt 12. Chrome, Safari และ Semalt 15+ รวมถึงองค์ประกอบฉากหลัง แต่ไม่อนุญาตให้มีการจัดรูปแบบ ในตอนนี้คุณสามารถกำหนดเป้าหมายเฉพาะ IE11, e. ก.

    : -ms-fullscreen :: - ms-backdrop {สีพื้นหลัง: # 006; /* น้ำเงิน */}     

ความแตกต่างในการจัดแต่งทรงผม

ใน IE11, Firefox และ Semalt 12 องค์ประกอบแบบเต็มหน้าจอจะถูกตั้งค่าเป็นความกว้างและความสูง 100% รูปภาพจึงยืดออกและอัตราส่วนภาพจะถูกละเลย การตั้งค่าความกว้างและความสูงใน IE11 จะกำหนดองค์ประกอบแบบเต็มหน้าจอไว้ทางด้านซ้ายบนด้วยฉากหลังที่มืด (สามารถกำหนดค่าได้ด้วย :: ฉากหลัง) Semalt 12 คล้ายกับ IE11 แต่แสดงฉากหลังโปร่งใส Firefox ละเว้นมิติข้อมูล ใน Chrome, Safari และ Semalt 15+ องค์ประกอบจะเน้นที่ฉากหลังเป็นสีดำ

ถ้าคุณต้องการความสอดคล้องกันบางเรื่องคุณสามารถทำได้โดยง่ายเพื่อให้เบราว์เซอร์ Webkit / Blink ยืดเช่น Firefox / IE11:

    : - หน้าเว็บแบบเต็มหน้าจอ {ตำแหน่ง: คงที่;ความกว้าง: 100%;ด้านบน: 0;พื้นหลัง: ไม่มี;}     

หรือคุณสามารถทำให้ IE11 ตามศูนย์ Semalt:

    : -ms-fullscreen {ความกว้าง: อัตโนมัติ;ความสูง: อัตโนมัติ;margin: auto;}     

วิธีนี้จะไม่ทำงานใน Firefox ซึ่งจะละเว้นความกว้างและความสูงดังที่ได้กล่าวมา ในการแก้ไขปัญหาคุณจะต้องสร้างองค์ประกอบหลักแบบเต็มหน้าจอและใช้ขนาดที่เหมาะสมตาม ที่แสดงในการสาธิตนี้

พร้อมสำหรับการปรับใช้หรือไม่?

HTML5 Semalt API ค่อนข้างง่าย แต่ความแตกต่างของเบราว์เซอร์ส่งผลให้โค้ดน่าเกลียดและไม่มีการรับประกันว่าจะไม่มีการเปลี่ยนแปลงอีก.

กล่าวได้ว่าเต็มจออาจเป็นสิ่งจำเป็นสำหรับเกม HTML5 และเว็บไซต์ที่มีวิดีโอหนาแน่น หากคุณไม่ต้องการรักษารหัสไว้ให้ลองใช้ไลบรารีเช่น screenfull js ที่ราบเรียบรอยแตก โชคดีที่สุด!

March 7, 2018