Artikel ini ditulis dan dikirimkan oleh developer eksternal. Tim YouTube API mengucapkan terima kasih kepada Ben Longoria atas waktu dan keahliannya.
Ben Longoria, University of Wisconsin - Madison, Academic Technology
Februari 2009
- Pengantar
- Kondisi Saat Ini
- Menggunakan Movie.as
- Menggunakan MovieSprite.as
- What Can I Call, What Do I Get?
- Kesimpulan
Pengantar
Gambar 1: Demo TubeLoc Chromeless Player
Wow. Hanya dalam waktu sekitar satu bulan, saat ini, YouTube Player API akan berusia satu tahun. Berapa tahun internet? Ada sejumlah project hebat yang dibuat di API. Anda hanya perlu mengikuti Blog YouTube Developer API untuk melihat bahwa ada banyak orang yang telah melakukan hal-hal luar biasa dengan API ini.
Kumpulan aplikasi pemutar YouTube API saat ini ditulis dalam ActionScript 2, dan meskipun bahasa ini masih bagus untuk digunakan, banyak orang kini menggunakan ActionScript 3 dan/atau Flex. Masalahnya adalah Anda harus melakukan beberapa hal untuk membuat aplikasi ActionScript 2 berkomunikasi dengan aplikasi ActionScript 3. Anda mungkin bertanya, "Tapi tunggu...Saya rasa saya pernah mendengarnya sebelumnya--bukankah sudah ada sesuatu untuk ini?"
Banyak orang telah mengetahui cara melakukannya dan dengan senang hati membagikan keahlian mereka di Forum Developer YouTube API. Ada juga project AS3 Chromeless Wrapper dan Flex Embedded Player untuk mempermudah developer menggunakannya.
Saya menginginkan cara yang mudah dan sederhana untuk menggunakan kembali fungsi Player API hanya di ActionScript 3 atau MXML. Class bebas Flex untuk project yang tidak menyukai Flex, dan komponen Flex yang mudah digunakan untuk project yang menyukai Flex. TubeLoc memenuhi kedua persyaratan
TubeLoc (gabungan YouTube dan LocalConnection) adalah library ActionScript 3 yang berfungsi sebagai adaptor untuk YouTube ActionScript 2 Player API. Anda dapat dengan mudah menambahkan fungsi video YouTube ke aplikasi ActionScript 3 atau Flex dengan pemutar YouTube dengan bingkai penuh atau tanpa bingkai. TubeLoc menggunakan class LocalConnection dalam berkomunikasi dengan SWF mediator ActionScript 2. SWF ActionScript 2 berkomunikasi dengan pemutar YouTube API resmi. Jadi, bagaimana cara menggunakan alat ini?
Kondisi Saat Ini
Pertama, Anda harus mendownload rilis library saat ini dari project Google Code. Setelah mengekstrak arsip zip rilis, Anda akan menemukan direktori as3 di dalamnya. Di bawah ini adalah direktori src yang menyertakan beberapa contoh class. Jangan ragu untuk menggunakannya sebagai titik awal. Di bagian com/enefekt/tubeloc dalam direktori src, terdapat dua file. Movie.as adalah yang dapat Anda gunakan dalam project Flex, dan MovieSprite.as adalah yang dapat Anda gunakan dalam project ActionScript 3. Di com/enefekt/tubeloc/event, ada berbagai class peristiwa untuk berbagai notifikasi yang dapat dikirim dari pemutar.
Sebelum mencoba contoh dalam tutorial ini, pastikan direktori src di direktori as3 berada di jalur class Anda. Proses untuk melakukannya berbeda-beda bergantung pada alat yang Anda gunakan untuk mengembangkan, jadi periksa dokumentasi untuk lingkungan pengembangan Anda.
Setelah mengompilasi demo atau aplikasi, Anda memerlukan SWF ActionScript 2 yang berkomunikasi dengan YouTube Player API. Anda dapat menemukan SWF ini di arsip rilis di sini: as3/lib/as2_tubeloc.swf. Pastikan file tersebut berada di samping file HTML yang menyematkan aplikasi SWF Anda, seperti ini:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Catatan: Anda dapat mengubah jalur ke SWF ini menggunakan properti playerWrapperUrl dengan library.
Menggunakan Movie.as
Mari kita lihat cara menggunakan TubeLoc versi Flex. Kita akan melihat pemutar chrome penuh (dengan semua kontrol) terlebih dahulu, lalu pemutar chromeless BYOC. Berikut cara menggunakan pemutar full-chrome di MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Ya, ya, sakit, ya? Bukan begitu. Jadi, mari kita coba tanpa bingkai:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Kami menambahkan satu atribut lagi, itu saja. Jadi, berikut adalah tampilan seluruh file 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>
Catatan: Di elemen mx:Application, kita menambahkan namespace tubeloc dengan paket untuk komponen Film. Setelah melakukannya, kita dapat menggunakan komponen seperti yang ditunjukkan. Nanti kita akan melihat apa yang tersedia untuk ditetapkan dan dipanggil pada komponen ini.
Menggunakan MovieSprite.as
Sekarang mari kita lihat cara menggunakan TubeLoc versi ActionScript 3. Versi ini tidak memerlukan class dari framework Flex, dan hanya menggunakan class native Flash Player. Kita akan melihat cara melakukan pemutar chrome penuh terlebih dahulu, lalu pemutar chromeless. Berikut adalah contoh lengkapnya:
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;
}
}
}
Pertama, kita mengimpor class TubeLoc yang diperlukan. Kemudian, di konstruktor, kita membuat instance class MovieSprite, dan meneruskan ID video ke konstruktor MovieSprite. Selanjutnya, kita menambahkan pemroses peristiwa untuk PlayerReadyEvent. Di pengendali peristiwa onPlayerReady, kita menetapkan ukuran film. Catatan: Karena menggunakan pemutar full-chrome, kita memanfaatkan properti statis CHROME_HEIGHT di class MovieSprite. Hal ini membantu kita menentukan ukuran film dengan mempertimbangkan tinggi chrome.
Oke, bagaimana dengan pemutar chromeless?
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");
}
}
}
Jadi, apa perbedaannya? Dalam konstruktor, kita meneruskan null untuk ID video, dan parameter true kedua memberi tahu class MovieSprite bahwa kita tidak akan menggunakan chrome. Anda juga akan melihat perbedaan pada pengendali peristiwa onPlayerReady. Di sinilah kita memuat video berdasarkan ID, menggunakan metode loadVideoById.
What Can I Call, What Do I Get?
Jadi, apa saja yang tersedia untuk dipanggil, dan peristiwa apa yang harus kita gunakan? Dalam arsip rilis yang Anda download, terdapat dokumentasi kode lengkap untuk mendapatkan detailnya. Sebagai ringkasan singkat, untuk Movie.as dan MovieSprite.as, Anda memiliki metode berikut:
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
Selain metode ini, di komponen Movie.as, Anda memiliki akses ke properti berikut:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Berikut adalah peristiwa yang dapat Anda ikuti. Anda dapat menemukan detail selengkapnya dalam dokumentasi.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Kesimpulan
Semoga artikel ini membantu Anda mengintegrasikan fungsi dan konten YouTube di aplikasi Flash. Ada batasan yang perlu diingat saat Anda mengembangkan dengan TubeLoc: Anda tidak dapat memiliki dua pemutar YouTube di panggung secara bersamaan.
Semoga masalah ini akan diperbaiki pada waktunya. Jadi, jika Anda menemukan bug atau fitur yang tidak ada, buka project Google Code dan laporkan di issue tracker. Terima kasih telah membaca.
Biodata Penulis
Ben Longoria adalah Developer Aplikasi Akademik untuk University of Wisconsin-Madison. Ia telah mengembangkan dengan Flash sejak Flash 5, dan Flex sejak rilis Flex 2. Selama 2 tahun terakhir, ia juga telah mengembangkan aplikasi yang didukung Mozilla. Ben telah mengerjakan sejumlah project pendidikan dan akademik, termasuk aplikasi lintas platform yang menargetkan browser dan desktop. Ia berperan aktif dalam desain antarmuka dan interaksi, serta menikmati tantangan dalam membuat software yang dapat digunakan. Anda dapat menemukan blognya di http://enefekt.com/sansbrowser/, dan membaca kontribusinya di InsideRIA.
Karya ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 3.0 Amerika Serikat.