สวัสดีครับ
หลังจากที่ทำหน้าประกาศผลค่าย Comcamp กันข้ามวันข้ามคืน ในที่สุดก็ทำจนเสร็จเรียบร้อยแล้ว ดีจมากครับที่หลายคนให้คำชื่นชมกันมาว่าสวย น่าใช้
สำหรับเรื่องที่จะนำเสนอวันนี้เป็น Gimmick เล็กๆ ที่ใส่ไว้ในหน้าประกาศว่าน้องติดค่าย คือส่วนก่อนหน้าจะเป็นส่วนล้อเลียน/แกล้งน้องกันก่อน แล้วพอลงมาหน้าล่างสุดก็เล่นวิดิโอแสดงความยินดี (นั่นคือที่มาของ เฮ! ขอหัวเรื่องนี้ครับ) โดยอัตโนมัตินั่นเอง
ส่วนที่สำคัญในการทำตรงนี้มี 2 ส่วนครับ คือการเช็คว่าน้องเลื่อนมาหน้าล่างสุดแล้วหรือยัง กับส่วนที่ไปสั่งให้ Youtube เล่นตอนเลื่อนลงมาถึงและสั่งหยุดเมื่อเลื่อนพ้นหรือออกไปหน้าหลัก
มาว่ากันที่ส่วนแรกก่อน ตาม Document ของ fullpage.js จะมีอีเวนต์ต่างๆ เช่นตอนที่เริ่มสร้าง element ตอนปรับขนาดหน้าจอ ส่วน event ที่เราจะใช้ก็คือ onLeave หรือตอนที่จะเลื่อน slide ไป slide อื่น
จาก Code ที่ผมโชว์ให้เห็นตรงนี้ จะมี 3 parameters หลักๆ ก็คือเลขลำดับ slide ที่กำลังจะออก, เลขลำดับ slide ที่จะไปถึง และก็ทิศทางที่จะไป เนื่องจากผมเอา Video ไปไว้หน้าสุดท้าย และไม่อยากให้มี error ขึ้นมา เงื่อนไขใน if เลยยุ่บยั่บไปนิดนึงนะครับ แต่หลักๆ ที่ใชก็คือถ้าวิดิโอพร้อมเล่น แล้วเราเลื่อนไปหน้าสุดท้าย (ที่มีคำแซวแกล้งด้วย คือมีมากกว่า 2 หน้า) และน้องติดค่ายจริง ก็สั่งให้ปรับระดับเสียงลงมาที่ 30% เพื่อไม่ให้น้องตกใจมากเกินไป แล้วสั่งเล่นวิดิโอ แต่ถ้าไม่ใช่ ก็สั่งให้หยุดวิดิโอ (เดิมผมสั่งให้เลื่อนไปที่จุดเริ่มต้นด้วย แต่มันลายเป็นว่าไปสั่งให้เล่นเองด้วย เลยเอาใหม่เป็นสั่งรีเซ็ตวิดิโอไปเลย) อีกส่วนที่สำคัญก็คือ Youtube API ครับ
หากใครเคยเห็นบางเว็บที่มีหน้ากาก player ที่เล่นวิดิโอจาก Youtube ล่ะก็ นั่นก็ใช้ Youtube API เหมือนกันครับ (ถ้าอยากลองทำ อ่านบทความนี้ดูครับ)
หลักๆ ที่เราต้องทำคือ
- โหลด script ขึ้นมา
- สร้าง element เล่น Youtube
- ควบคุมการเล่น
ส่วนแรกเราสามารถคัดลอกจากหน้า Document ของ Youtube ได้เลยครับ
ส่วนต่อมาคือการสร้าง element ขึ้นมาครับ เมื่อโหลด script เสร็จ onYouTubeIframeAPIReady ก็จะถูกเรียกขึ้นมาโดยอัตโนมัติ เราก็สามารถสั่งสร้าง element ขึ้นมาครับ
จากสคริปต์ที่ผมใช้ในเว็บ ผมต้องการให้มันพอดีกับหน้าจอ (ถ้าไม่เล่นพิเรนห์กับเว็บอ่ะนะ) ก็เลยให้คำนวนขนาดหน้าจอก่อนด้วย .height และ .weight แล้วก็สั่งให้สร้าง YT.Player ขึ้นมาครับ
ส่วนสุดท้ายคือส่วนควบคุมการเล่น จะมี 2 ส่วนหลักครับ คือเมื่อ element สร้างเสร็จ เพื่อให้แน่ใจว่าจะไม่มีการหลุดปากออกมาก่อน ก็เลยสั่งให้หยุดวิดิโอก่อน และก็หากมีการเปลี่ยนแปลงการทำงาน onYoutubePlayerStateChange ก็จะถูกเรียกขึ้นมา (ทั้ง 2 ฟังก์ชั่นเรากำหนดชื่อเองได้นะครับ ขอแค่สื่อความหมายและไม่ซ้ำก็เป็นอันใช้ได้) หากมีการเล่นแล้วน้องไม่ติด (คือหลุดปากมานั่นแหละ) ก็สั่งให้หยุดโดยพลัน
Code ตัวอย่างเต็มๆ สามารถไปลองได้ที่หน้าเว็บหรือจะโหลดก็ดู source code ฉบับเต็มหรือรอดูใน Github ของเว็บได้เลยนะครับ มีอะไรสงสัยสามารถถามมาใน comment ได้เลยครับ