บทความนี้เขียนและส่งโดยนักพัฒนาแอปภายนอก ทีม YouTube API ขอขอบคุณ Ben Longoria ที่สละเวลาและแสดงความเชี่ยวชาญ
Ben Longoria, มหาวิทยาลัยวิสคอนซิน - แมดิสัน, เทคโนโลยีทางวิชาการ
กุมภาพันธ์ 2009
- บทนำ
- แผนผังภาพรวม
- การใช้ Movie.as
- การใช้ MovieSprite.as
- ฉันจะโทรหาใครได้บ้างและจะได้รับอะไรบ้าง
- สรุป
บทนำ
รูปที่ 1: การสาธิตโปรแกรมเล่น TubeLoc แบบไม่มี Chrome
ว้าว อีกเพียงไม่กี่เดือน YouTube Player API จะครบรอบ 1 ปี นั่นคือกี่ปีในอินเทอร์เน็ต มีโปรเจ็กต์ดีๆ จำนวนมากที่สร้างจาก API นี้ คุณเพียงต้องติดตามบล็อก YouTube Developer API ก็จะเห็นว่ามีผู้คนจำนวนมากที่สร้างสิ่งดีๆ ขึ้นมาด้วย API นี้
ชุดแอปพลิเคชันโปรแกรมเล่น YouTube API ปัจจุบันเขียนด้วย ActionScript 2 แม้ว่าภาษานี้จะยังคงเป็นภาษาที่ยอดเยี่ยม แต่ปัจจุบันผู้คนจำนวนมากใช้ ActionScript 3 และ/หรือ Flex ปัญหาคือคุณต้องดำเนินการหลายอย่างเพื่อให้แอปพลิเคชัน ActionScript 2 สื่อสารกับแอปพลิเคชัน ActionScript 3 ได้ คุณอาจสงสัยว่า "เดี๋ยวก่อน...ฉันคิดว่าเคยได้ยินเรื่องนี้มาก่อน ไม่ได้มีเครื่องมือสำหรับเรื่องนี้อยู่แล้วใช่ไหม"
ผู้คนจำนวนมากค้นพบวิธีดำเนินการนี้แล้วและได้แชร์ความรู้ในฟอรัมนักพัฒนา YouTube API นอกจากนี้ ยังมีโปรเจ็กต์ AS3 Chromeless Wrapper และ Flex Embedded Player เพื่อช่วยนักพัฒนาแอปใช้งานได้ง่ายขึ้น
ฉันต้องการวิธีง่ายๆ ในการนําฟังก์ชันการทำงานของ Player API มาใช้ซ้ำใน ActionScript 3 หรือ MXML เท่านั้น คลาสที่ไม่มี Flex สำหรับโปรเจ็กต์ที่ไม่ชอบ Flex และคอมโพเนนต์ Flex ที่ใช้งานง่ายสำหรับโปรเจ็กต์ที่รัก Flex TubeLoc เป็นไปตามข้อกำหนดทั้ง 2 ข้อ
TubeLoc (การรวม YouTube เข้ากับ LocalConnection) คือไลบรารี ActionScript 3 ที่ทำหน้าที่เป็นอะแดปเตอร์สำหรับ YouTube ActionScript 2 Player API คุณเพิ่มฟังก์ชันการทำงานของวิดีโอ YouTube ลงในแอปพลิเคชัน ActionScript 3 หรือ Flex ได้อย่างง่ายดายด้วยโปรแกรมเล่น YouTube แบบมีแถบเครื่องมือหรือแบบไม่มีแถบเครื่องมือ TubeLoc ใช้คลาส LocalConnection ในการสื่อสารกับ SWF ตัวกลาง ActionScript 2 SWF ของ ActionScript 2 จะสื่อสารกับโปรแกรมเล่น YouTube API อย่างเป็นทางการ แล้วเราจะใช้ฟีเจอร์นี้อย่างไร
แผนผังภาพรวม
ก่อนอื่น คุณควรดาวน์โหลดไลบรารีรุ่นปัจจุบันจากโปรเจ็กต์ Google Code หลังจากแตกไฟล์ ZIP ของรุ่นแล้ว คุณจะเห็นไดเรกทอรี as3 อยู่ภายใน ด้านล่างนี้คือไดเรกทอรี src ซึ่งมีคลาสตัวอย่างบางส่วน คุณสามารถใช้ข้อมูลเหล่านี้เป็นจุดเริ่มต้นได้ ภายใต้ com/enefekt/tubeloc ในไดเรกทอรี src มี 2 ไฟล์ Movie.as คือสิ่งที่คุณใช้ในโปรเจ็กต์ Flex ได้ และ MovieSprite.as คือสิ่งที่คุณใช้ในโปรเจ็กต์ ActionScript 3 ได้ ใน com/enefekt/tubeloc/event มีคลาสเหตุการณ์ต่างๆ สําหรับการแจ้งเตือนที่ส่งจากโปรแกรมเล่นได้
ก่อนลองทำตามตัวอย่างในบทแนะนำนี้ โปรดตรวจสอบว่าไดเรกทอรี src ในไดเรกทอรี as3 อยู่ในเส้นทางคลาสของคุณ กระบวนการนี้จะแตกต่างกันไปตามสิ่งที่คุณใช้พัฒนา ดังนั้นโปรดอ่านเอกสารประกอบสำหรับสภาพแวดล้อมการพัฒนาของคุณ
เมื่อคอมไพล์ไฟล์เดโมหรือแอปพลิเคชันแล้ว คุณจะต้องมี SWF ของ ActionScript 2 ที่สื่อสารกับ YouTube Player API คุณดู SWF นี้ได้ในที่เก็บถาวรของรุ่นที่นี่ as3/lib/as2_tubeloc.swf เพียงตรวจสอบว่าไฟล์อยู่ข้างไฟล์ HTML ที่มีการฝังแอปพลิเคชัน SWF ดังตัวอย่างต่อไปนี้
my_app/ my_app.html as2_tubeloc.swf my_app.swf
หมายเหตุ: คุณเปลี่ยนเส้นทางไปยัง SWF นี้โดยใช้พร็อพเพอร์ตี้ playerWrapperUrl กับไลบรารีได้
การใช้ Movie.as
มาดูวิธีใช้ TubeLoc เวอร์ชัน Flex กัน เราจะดูที่โปรแกรมเล่นแบบ Chrome เต็มรูปแบบ (ที่มีการควบคุมทั้งหมด) ก่อน จากนั้นจึงดูที่โปรแกรมเล่นแบบไม่ใช้ Chrome ที่ BYOC วิธีใช้โปรแกรมเล่นแบบเต็มหน้าจอใน MXML มีดังนี้
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
เราทราบดีว่าเจ็บปวด ไม่เลย มาลองใช้โหมด Chromeless กัน
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
เราขอเพิ่มความปวดหัวด้วยแอตทริบิวต์อีก 1 รายการ ไฟล์ MXML ทั้งหมดจึงมีลักษณะดังนี้
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:tubeloc="com.enefekt.tubeloc.*"> <!-- TubeLoc Movie Component --> <tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" /> </mx:Application>
หมายเหตุ: ในองค์ประกอบ mx:Application เราจะเพิ่มเนมสเปซ tubeloc ที่มีแพ็กเกจสำหรับคอมโพเนนต์ภาพยนตร์ หลังจากทําเช่นนี้แล้ว เราจะใช้คอมโพเนนต์ได้ตามที่สาธิต เราจะมาดูสิ่งที่มีให้ตั้งค่าและเรียกใช้คอมโพเนนต์นี้ในภายหลัง
การใช้ MovieSprite.as
ตอนนี้เรามาดูวิธีใช้ TubeLoc เวอร์ชัน ActionScript 3 กัน เวอร์ชันนี้ไม่ต้องใช้คลาสจากเฟรมเวิร์ก Flex และใช้เฉพาะคลาสเนทีฟของ Flash Player เท่านั้น เราจะดูวิธีใช้เพลเยอร์แบบเต็ม Chrome ก่อน แล้วค่อยดูวิธีใช้เพลเยอร์แบบไม่ใช้ Chrome ตัวอย่างแบบเต็มมีดังนี้
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromed extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromed() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite("7tTNOX8jfno");
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480 + MovieSprite.CHROME_HEIGHT;
}
}
}
ก่อนอื่น เราจะนําเข้าคลาส TubeLoc ที่จําเป็น จากนั้นในคอนสตรคเตอร์ เราจะสร้างอินสแตนซ์ของคลาส MovieSprite และส่งรหัสวิดีโอไปยังคอนสตรคเตอร์ของ MovieSprite ถัดไป เราจะเพิ่ม Listener เหตุการณ์สําหรับ PlayerReadyEvent ในเครื่องจัดการเหตุการณ์ onPlayerReady เรากําหนดขนาดของภาพยนตร์ หมายเหตุ: เนื่องจากเราใช้เพลเยอร์แบบ Chrome แบบเต็ม เราจึงใช้ประโยชน์จากพร็อพเพอร์ตี้แบบคงที่ CHROME_HEIGHT ในคลาส MovieSprite ซึ่งช่วยให้เราปรับขนาดภาพยนตร์โดยคำนึงถึงความสูงของแถบโครเมียม
โอเค แล้วผู้ชมที่ไม่ใช้ Chrome ล่ะ
package {
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import com.enefekt.tubeloc.MovieSprite;
import com.enefekt.tubeloc.event.*;
[SWF(backgroundColor="#FFFFFF")]
public class MainChromeless extends Sprite {
private var youtubeMovie:MovieSprite;
public function MainChromeless() {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
youtubeMovie = new MovieSprite(null, true);
youtubeMovie.addEventListener(PlayerReadyEvent.PLAYER_READY, onPlayerReady);
youtubeMovie.x = 10;
youtubeMovie.y = 10;
addChild(youtubeMovie);
}
private function onPlayerReady(event_p:PlayerReadyEvent):void {
youtubeMovie.width = 640;
youtubeMovie.height = 480;
youtubeMovie.loadVideoById("7tTNOX8jfno");
}
}
}
มีอะไรเปลี่ยนแปลงไปบ้าง ในคอนสตรัคเตอร์ เราจะส่ง null สำหรับรหัสวิดีโอ และพารามิเตอร์ true ตัวที่ 2 จะบอกคลาส MovieSprite ว่าเรากำลังจะใช้โหมด Chromeless นอกจากนี้ คุณยังจะเห็นความแตกต่างในตัวแฮนเดิลเหตุการณ์ onPlayerReady ด้วย นี่เป็นจุดที่เราโหลดวิดีโอตามรหัสโดยใช้เมธอด loadVideoById
ฉันจะโทรหาใครได้บ้างและจะได้รับอะไรบ้าง
มีอะไรบ้างที่โทรได้ และเราต้องดำเนินการกับเหตุการณ์ใด ในที่เก็บถาวรของรุ่นที่คุณดาวน์โหลดจะมีเอกสารประกอบโค้ดฉบับเต็มเพื่อให้คุณดูรายละเอียด ภาพรวมคร่าวๆ สำหรับทั้ง Movie.as และ MovieSprite.as มีเมธอดต่อไปนี้
seekTo(seconds:Number, allowSeekAhead:Boolean=true):void setVolume(volume:Number):void getVolume():Number unMute():void mute():void clearVideo():void setSize(width:Number, height:Number):void loadVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] cueVideoById(videoId:String, startSeconds:Number = 0):void [Chromeless player only] stopVideo():void playVideo():void pauseVideo():void destroy():void
นอกจากวิธีการเหล่านี้แล้ว คุณยังมีสิทธิ์เข้าถึงพร็อพเพอร์ตี้ต่อไปนี้ในคอมโพเนนต์ Movie.as
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
เหตุการณ์ที่คุณสมัครรับข้อมูลได้มีดังนี้ ดูรายละเอียดเพิ่มเติมได้ในเอกสารประกอบ
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
บทสรุป
เราหวังว่าบทความนี้จะช่วยให้คุณผสานรวมฟังก์ชันการทำงานและเนื้อหาของ YouTube ในแอปพลิเคชัน Flash ได้ ข้อจำกัดที่ควรทราบขณะพัฒนาด้วย TubeLoc คือคุณไม่สามารถมีโปรแกรมเล่น YouTube 2 ตัวในสเตจพร้อมกัน
เราหวังว่าปัญหานี้จะได้รับการแก้ไขในไม่ช้า ดังนั้นเมื่อพบข้อบกพร่องหรือฟีเจอร์บางอย่างขาดหายไป โปรดไปที่โปรเจ็กต์ Google Code และรายงานปัญหาในเครื่องมือติดตามปัญหา ขอขอบคุณที่อ่าน
ประวัติผู้แต่ง
Ben Longoria เป็นนักพัฒนาแอปพลิเคชันทางวิชาการของมหาวิทยาลัยวิสคอนซิน-แมดิสัน เขาพัฒนาซอฟต์แวร์ด้วย Flash มาตั้งแต่ Flash 5 และ Flex มาตั้งแต่รุ่น 2 ในช่วง 2 ปีที่ผ่านมา เขายังพัฒนาแอปพลิเคชันที่ทำงานด้วย Mozilla ด้วย Ben เคยทำงานในโปรเจ็กต์ด้านการศึกษาและวิชาการหลายโปรเจ็กต์ รวมถึงแอปพลิเคชันข้ามแพลตฟอร์มที่มุ่งเน้นทั้งเบราว์เซอร์และเดสก์ท็อป เขามีส่วนร่วมในการออกแบบอินเทอร์เฟซและการโต้ตอบ และชอบความท้าทายในการสร้างซอฟต์แวร์ที่ใช้งานได้ คุณสามารถดูบล็อกของเขาได้ที่ http://enefekt.com/sansbrowser/ และอ่านบทความที่เขาเขียนให้ InsideRIA
ผลงานนี้ได้รับอนุญาตภายใต้สัญญาอนุญาตครีเอทีฟคอมมอนส์สำหรับยอมรับสิทธิของผู้สร้าง (Creative Commons Attribution License) 3.0 ของสหรัฐอเมริกา