สอนวิธีใช้ HTML5 Fullscreen

html fullscreen

วันนี้เราจะมาทำความรู้จักกับอีก feature หนึ่งที่น่าสนใจของ html ที่จะช่วยให้เราสามารถแสดงผล html element ใดๆ แบบเต็มหน้าจอได้ feature นั้นก็คือ HTML Fullscreen

API

การจะใช้ html fullscreen เราจะต้องทำผ่าน api ก่อนอื่นเรามาดูว่า fullscreen api ประกอบไปด้วย attributes, methods และ event อะไรบ้าง

  • fullscreenEnabledattribute ที่เอาไว้เช็คว่า web browser รองรับ html fullscreen แล้วหรือยัง
  • requestFullscreenmethod สำหรับแสดงผล element นั้นๆ ในโหมด fullscreen
  • exitFullscreenmethod สำหรับออกจากโหมด fullscreen
  • fullscreenchangeevent ที่จะเกิดเมื่อมีการเข้าหรือออกจากโหมด fullscreen
  • fullscreenElementattribute ที่เอาไว้ดูว่า element ไหนที่กำลังแสดงผลในโหมด fullscreen อยู่

CSS

นอกจากนั้น html fullscreen ยังมี css pseudo class ใหม่เพิ่มเข้ามาอีกด้วย

  • :fullscreenเราสามารถกำหนดสไตล์พิเศษสำหรับ html element ที่กำลังอยู่ในสถานะ fullscreen ได้โดยใช้ css pseudo class ที่มีชื่อว่า :fullscreen

Workshop

เมื่อพอจะเข้าใจ fullscreen api คร่าวๆ แล้ว เราลองมา workshop กันเลยดีกว่า เริ่มด้วยการเช็คว่า browser นี้ ใช้ html fullscreen ได้แล้วหรือยัง
(ใน workshop นี้ จะขออนุญาตใช้ jQuery เพื่อให้ง่ายต่อการทำความเข้าใจ)

เมื่อเช็คดูแล้วว่าใช้ html fullscreen ได้ ทีนี้เราลองมาทำให้รูปๆ นึง แสดงผลแบบ fullscreen เวลา click ไปที่รูปนั้นดู

เมื่อเราทำให้ html element แสดงผลแบบ fullscreen ได้แล้ว ต่อมาให้เราลองทำปุ่มสำหรับออกจากโหมด fullscreen ดูบ้าง (โดยปกติแล้ว เราสามารถออกจากโหมด fullscreen ได้ด้วยการกดปุ่ม Esc)

นอกจากนี้ เรายังสามารถเช็คได้ว่า ณ ตอนนี้ มี html element ไหน ที่กำลังอยู่ในโหมด fullscreen หรือเปล่า โดยอาศัย event fullscreenchange กับ attribute fullscreenElement ร่วมกัน ลองดูตัวอย่างต่อไปนี้

Browsers Compatibility

เราสามารถใช้ html fullscreen ได้แล้วกับ web browsers หลักๆ สำหรับ desktop ยกเว้นเสียแต่ Internet Explorer ที่จะรองรับตั้งแต่เวอร์ชัน 11 เป็นต้นไป แต่เนื่องจาก specification ของ html fullscreen ยังไม่นิ่ง เราจึงจำเป็นจะต้องใส่ vendor prefix ไปก่อน สามารถดูรายละเอียดได้ที่ Can I use Full Screen API?

Vendor prefix

หากเราจะเริ่มใช้ html fullscreen ณ ตอนนี้เลย เราจะต้องใส่ vendor prefix ทั้งในส่วนของ api และ css ดังนี้

fullscreenEnabled

requestFullscreen

exitFullscreen

fullscreenchange

fullscreenElement

:fullscreen

จะเห็นว่าเราต้องเขียนโค้ดเพิ่มไม่น้อยเลยทีเดียวในส่วนของ api วิธีแก้ก็คือให้เราใช้ตัวช่วยอย่าง screenfull.js ซึ่งเป็น javascript ที่เขียนมาครอบ fullscreen api อีกที โดยมันจะช่วยจัดการเกี่ยวกับเรื่อง vendor prefix แทนเราทั้งหมด เราจึงไม่ต้องใส่ vendor prefix อีกต่อไป

DemoSource
(Visited 4,379 times, 2 visits today)

Leave a Reply