บทความนี้เขียนโดยนักพัฒนาแอปภายนอก ทีม API ของ YouTube ขอขอบคุณ Ben Longoria สําหรับเวลาและความเชี่ยวชาญ
Ben Longoria, University of Wisconsin - Madison, Academic Technology
กุมภาพันธ์ 2009
- บทนำ
- เพิ่มเติมสําหรับผืนดิน
- การใช้ Movies.as
- การใช้ MoviesSprite.as
- ฉันจะเรียกอะไร ฉันจะได้อะไร
- สรุป
บทนำ
รูปที่ 1: การสาธิตการใช้งาน TubeLoc Chromeless Player
ว้าว ในเวลาเพียงประมาณ 1 เดือน เมื่อเขียนบทความนี้ API ของ YouTube Player ก็จะมีอายุ 1 ปี ใช้งานอินเทอร์เน็ตมาแล้วกี่ปี มี API จํานวนมากที่สร้างจาก API คุณเพียงแค่ต้องติดตามบล็อก YouTube Developer API เพื่อดูว่ามีบุคคลอื่นๆ อีกมากที่ทําสิ่งดีๆ ด้วย
ชุดแอปพลิเคชันโปรแกรมเล่น API ของ YouTube ชุดปัจจุบันเขียนขึ้นใน Script 2 และถึงแม้ว่าภาษานี้จะยังคงใช้ภาษาที่ดีได้ แต่หลายคนก็ใช้ ActionScript 3 และ/หรือ Flex ปัญหานี้เกิดขึ้นเนื่องจากคุณต้องทําการทดสอบ 2-3 รอบเพื่อให้แอปพลิเคชัน WHOIS 2 สื่อสารกับแอปพลิเคชัน WHOIS 3 "เดี๋ยวนะ ฉันคิดว่าฉันได้ยินก่อนหน้านี้แล้ว ยังไม่มีอะไรให้ฟังอีกหรือเปล่า" คุณอาจถามขึ้นมา
มีคนจํานวนมากที่คิดหาวิธีทําสิ่งนี้ไว้แล้ว และจึงนําความรู้ของตนเองไปใส่ไว้ในฟอรัมนักพัฒนาซอฟต์แวร์ API ของ YouTube นอกจากนี้ ยังมีโปรเจ็กต์ AS3 Chromeless Wrapper และ Flex Embedded Player เพื่อให้นักพัฒนาซอฟต์แวร์ใช้งานได้ง่ายขึ้น
ฉันต้องการวิธีง่ายๆ ในการนําฟังก์ชัน Player API มาใช้ซ้ําใน AMPHTML 3 หรือ MXML ชั้นเรียน Flex ที่ไม่มีค่าใช้จ่ายสําหรับโครงการที่แพ้ Flex และคอมโพเนนต์ Flex ที่ใช้งานง่ายสําหรับโปรเจ็กต์เหล่านั้นที่ใช้ Flex TubeLoc เป็นไปตามข้อกําหนดทั้ง 2 ข้อ
TubeLoc (แมชอัปของ YouTube และ LocalConnection) เป็นไลบรารี WHOIS 3 ที่ทําหน้าที่เป็นอะแดปเตอร์สําหรับ YouTube Script 2 Player API คุณสามารถเพิ่มฟังก์ชันวิดีโอ YouTube ในแอปพลิเคชัน Application 3 หรือ Flex ได้ง่ายๆ ด้วยโปรแกรมเล่นวิดีโอ YouTube แบบ Chrome TubeLoc ใช้คลาส LocalConnection ในการสื่อสารกับ SSH สื่อกลาง MediaT 2 XHTML 2 SWF สื่อสารกับโปรแกรมเล่นวิดีโอ YouTube API อย่างเป็นทางการ แล้วเราก็จะนําสิ่งนี้ไปใช้อย่างไร
นิทรรศการ The Lay of the Land
ก่อนอื่น คุณควรดาวน์โหลดรุ่นปัจจุบันของห้องสมุดจากโปรเจ็กต์ Google Code หลังจากแตกไฟล์ ZIP ที่เก็บถาวรแล้ว คุณจะเห็นไดเรกทอรี as3 ภายใน ด้านล่างนี้คือไดเรกทอรี src ที่มีตัวอย่างคลาสบางรายการ คุณใช้ URL เหล่านี้เป็นจุดเริ่มต้นได้ ใต้ com/enefekt/tubeloc ในไดเรกทอรี src มี 2 ไฟล์ Movie.as คือสิ่งที่คุณใช้ในโปรเจ็กต์ Flex ได้ และ MovieSprite.as คือสิ่งที่ใช้ในโปรเจ็กต์ AMPHTML 3 ได้ ใน com/enefekt/tubeloc/event จะมีคลาสต่างๆ ของกิจกรรมสําหรับการแจ้งเตือนต่างๆ ที่ส่งจากโปรแกรมเล่นได้
ก่อนทดลองใช้ในบทแนะนํานี้ โปรดตรวจสอบว่าไดเรกทอรี src ในไดเรกทอรี as3 อยู่ในเส้นทางของชั้นเรียน วิธีดําเนินการจะแตกต่างกันขึ้นอยู่กับวิธีที่คุณใช้พัฒนาแอป ดังนั้นโปรดอ่านเอกสารประกอบสําหรับสภาพแวดล้อมการพัฒนาของคุณ
เมื่อรวบรวมเดโมหรือแอปพลิเคชันแล้ว คุณจะต้องใช้ reCAPTCHA 2 SWF ที่สื่อสารกับ YouTube Player API คุณจะพบ SWF นี้ในที่เก็บถาวรของรุ่นที่นี่: as3/lib/as2_tubeloc.swf เพียงแค่ตรวจสอบว่าไฟล์อยู่ถัดจากไฟล์ HTML ที่ฝังแอปพลิเคชัน SWF ของคุณ ดังตัวอย่างต่อไปนี้
my_app/ my_app.html as2_tubeloc.swf my_app.swf
หมายเหตุ: คุณเปลี่ยนเส้นทางไปยัง SWF นี้ได้โดยใช้พร็อพเพอร์ตี้ playerWrapperUrl กับไลบรารี
การใช้ Movies.as
มาดูวิธีใช้ TubeLoc เวอร์ชัน Flex กัน เราจะดูโปรแกรมเล่น Chrome เต็มรูปแบบ (พร้อมตัวควบคุมทั้งหมด) ก่อน จากนั้นที่โปรแกรมเล่นของ Chrome แบบ BYOC วิธีใช้โปรแกรมเล่น Chrome เต็มรูปแบบใน MXML มีดังนี้
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
รู้ไหมว่าฉันปวดใจใช่ไหม ไม่ถูกเลย ปล่อยให้ทุกอย่างวุ่นวายไปกับ Chrome กันดีกว่า
<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 ที่มีแพ็กเกจสําหรับคอมโพเนนต์ภาพยนตร์ หลังจากดําเนินการนี้แล้ว เราจะใช้คอมโพเนนต์ตามที่แสดงได้ เราจะมาดูสิ่งที่พร้อมสําหรับการตั้งค่าและเรียกใช้ในคอมโพเนนต์นี้ในภายหลัง
การใช้ MoviesSprite.as
คราวนี้มาดูวิธีใช้ TubeLoc เวอร์ชัน Action 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 และส่งรหัสวิดีโอของเราไปยังตัวสร้างของ MoviesSprite ถัดไป เราจะเพิ่ม Listener เหตุการณ์ของ PlayerReadyEvent ในเครื่องจัดการเหตุการณ์ onPlayerReady เราจะกําหนดขนาดของภาพยนตร์ หมายเหตุ: เนื่องจากเรากําลังใช้โปรแกรมเล่น Chrome เต็มรูปแบบ เราจึงใช้ประโยชน์จากพร็อพเพอร์ตี้แบบคงที่ CHROME_HEIGHT ในคลาส MovieSprite วิธีนี้จะช่วยให้เราปรับขนาดภาพยนตร์ที่แสดงความสูงของ 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 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 ที่สองจะบอกคลาส MovieSprite ว่าเราจะไม่ใช้ Chrome คุณจะสังเกตเห็นความแตกต่างในเครื่องจัดการเหตุการณ์ onPlayerReady ด้วย นี่คือที่ที่เราโหลดวิดีโอตามรหัส โดยใช้เมธอด loadVideoById
ฉันเรียกว่าอะไร ฉันจะได้รับอะไรบ้าง
มีอะไรในการโทรบ้าง และเราต้องจัดกิจกรรมอะไรบ้าง ในที่เก็บถาวรของรุ่นที่ดาวน์โหลด มีเอกสารประกอบฉบับเต็มให้ดูรายละเอียด ภาพรวมคร่าวๆ ของทั้ง Movies.as และ MoviesSprite.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
นอกเหนือจากวิธีการต่อไปนี้ ในคอมโพเนนต์ Movies.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 เป็นนักพัฒนาซอฟต์แวร์แอปพลิเคชันทางวิชาการสําหรับมหาวิทยาลัย Wisconsin-Madison เขาพัฒนาด้วย Flash มาตั้งแต่ Flash 5 และ Flex ตั้งแต่รุ่น Flex 2 ในช่วง 2 ปีที่ผ่านมา เขาได้พัฒนาแอปพลิเคชันที่ขับเคลื่อนโดย Mozilla ด้วย บรรพตทํางานโปรเจ็กต์ด้านการศึกษาและวิชาการจํานวนมาก ซึ่งรวมถึงแอปพลิเคชันข้ามแพลตฟอร์มที่กําหนดเป้าหมายทั้งเบราว์เซอร์และเดสก์ท็อป เขามีบทบาทสําคัญในการออกแบบอินเทอร์เฟซและการโต้ตอบ ทั้งยังชื่นชอบการสร้างซอฟต์แวร์ที่ใช้งานได้จริง คุณสามารถดูบล็อกของเขาได้ที่ http://enefekt.com/sansbrowser/ และอ่านการมีส่วนร่วมของเขากับ InsideRIA
ผลงานนี้ได้รับอนุญาตภายใต้สัญญาอนุญาตครีเอทีฟคอมมอนส์ (Creative Commons Attribution License) 3.0 ของสหรัฐอเมริกา