สวัสดีครับ
หลังจากที่ทำหน้าประกาศผลค่าย 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 เหมือนกันครับ (ถ้าอยากลองทำ อ่านบทความนี้ดูครับ)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var youtubeScriptTag = document.createElement('script'); | |
| youtubeScriptTag.src = "https://www.youtube.com/iframe_api"; | |
| var firstScriptTag = document.getElementsByTagName('script')[0]; | |
| firstScriptTag.parentNode.insertBefore(youtubeScriptTag, firstScriptTag); | |
| var deviceRatio = ($(document).width())/($(document).height()); | |
| $(window).resize(function(){ | |
| var currDeviceRatio = ($(document).width())/($(document).height()); | |
| if(currDeviceRatio != deviceRatio && youtubePlayer && typeof youtubePlayer.stopVideo !== "undefined"){ | |
| //youtubePlayer.setSize(parseInt($(document).width() * 0.75), parseInt($(document).height() * 0.5)); | |
| } | |
| }); | |
| }); | |
| function onYoutubePlayerReady(event){ | |
| event.target.stopVideo(); | |
| } | |
| function onYoutubePlayerStateChange(event){ | |
| console.log("State Change -> ", event); | |
| if (event.data == YT.PlayerState.PLAYING && !isCongreat) { | |
| youtubePlayer.stopVideo(); | |
| } | |
| } | |
| function onYouTubeIframeAPIReady() { | |
| var width_youtube = parseInt($(document).height() * 0.4 *1.77); | |
| var maxwidth = parseInt($(document).width()); | |
| if(width_youtube>maxwidth){ | |
| width_youtube = parseInt($(document).width() * 0.75); | |
| } | |
| youtubePlayer = new YT.Player('congreat-youtube-player', { | |
| height: parseInt($(document).height() * 0.4), | |
| width: parseInt(width_youtube), | |
| videoId: 't_gUBY3K-JE', | |
| events: { | |
| 'onReady': onYoutubePlayerReady, | |
| 'onStateChange': onYoutubePlayerStateChange | |
| } | |
| }); | |
| } |
หลักๆ ที่เราต้องทำคือ
- โหลด script ขึ้นมา
- สร้าง element เล่น Youtube
- ควบคุมการเล่น
ส่วนแรกเราสามารถคัดลอกจากหน้า Document ของ Youtube ได้เลยครับ
ส่วนต่อมาคือการสร้าง element ขึ้นมาครับ เมื่อโหลด script เสร็จ onYouTubeIframeAPIReady ก็จะถูกเรียกขึ้นมาโดยอัตโนมัติ เราก็สามารถสั่งสร้าง element ขึ้นมาครับ
จากสคริปต์ที่ผมใช้ในเว็บ ผมต้องการให้มันพอดีกับหน้าจอ (ถ้าไม่เล่นพิเรนห์กับเว็บอ่ะนะ) ก็เลยให้คำนวนขนาดหน้าจอก่อนด้วย .height และ .weight แล้วก็สั่งให้สร้าง YT.Player ขึ้นมาครับ
ส่วนสุดท้ายคือส่วนควบคุมการเล่น จะมี 2 ส่วนหลักครับ คือเมื่อ element สร้างเสร็จ เพื่อให้แน่ใจว่าจะไม่มีการหลุดปากออกมาก่อน ก็เลยสั่งให้หยุดวิดิโอก่อน และก็หากมีการเปลี่ยนแปลงการทำงาน onYoutubePlayerStateChange ก็จะถูกเรียกขึ้นมา (ทั้ง 2 ฟังก์ชั่นเรากำหนดชื่อเองได้นะครับ ขอแค่สื่อความหมายและไม่ซ้ำก็เป็นอันใช้ได้) หากมีการเล่นแล้วน้องไม่ติด (คือหลุดปากมานั่นแหละ) ก็สั่งให้หยุดโดยพลัน
Code ตัวอย่างเต็มๆ สามารถไปลองได้ที่หน้าเว็บหรือจะโหลดก็ดู source code ฉบับเต็มหรือรอดูใน Github ของเว็บได้เลยนะครับ มีอะไรสงสัยสามารถถามมาใน comment ได้เลยครับ