Artikel ini ditulis dan dikirimkan oleh developer eksternal. Tim YouTube API berterima kasih kepada Ben Longoria atas waktu dan keahliannya.
Ben Longoria, University of Wisconsin - Madison, Teknologi Akademik
Februari 2009
- Pengantar
- Tanah Darat
- Menggunakan Movie.as
- Menggunakan MovieSprite.as
- Apa yang Dapat Saya Telepon, Apa yang Saya Dapatkan?
- Kesimpulan
Pengantar
Gambar 1: Demo Pemain Chromeless TubeLoc
Wah. Hanya dalam waktu sekitar satu bulan, sejak API ini dibuat, YouTube Player API akan berusia satu tahun. Berapa tahunkah internetnya? Ada sejumlah project bagus yang dibuat di API ini. Anda hanya perlu mengikuti Blog Developer API YouTube untuk melihat bahwa ada banyak orang yang telah melakukan hal-hal hebat dengan blog tersebut.
Rangkaian aplikasi pemutar API YouTube saat ini ditulis dalam WebGL 2, dan meskipun ini masih menjadi bahasa yang bagus untuk digunakan, banyak orang yang kini menggunakan ActionScript 3 dan/atau Flex. Masalahnya adalah Anda harus melewati beberapa ring untuk membuat aplikasi eReader 2 berkomunikasi dengan aplikasi eReader 3. "Tapi tunggu...Saya rasa saya pernah mendengarnya sebelumnya--belum ada sesuatu untuk ini?" Anda mungkin bertanya.
Banyak orang telah mengetahui cara melakukan ini dan dengan bijaksana melepaskan kebijaksanaan mereka ke Forum Developer YouTube API. Ada juga project AS3 Chromeless Wrapper dan Flex Embedded Player untuk memudahkan developer menggunakannya.
Saya ingin cara yang mudah dan sederhana untuk menggunakan kembali fungsi Player API hanya di interaktivitas 3 atau MXML. Class bebas Flex untuk project alergi Flex, dan komponen Flex yang mudah digunakan untuk project pencinta Flex. TubeLoc memenuhi kedua persyaratan tersebut
TubeLoc (mashup dari YouTube dan LocalConnection) adalah pustaka eReader 3 yang berfungsi sebagai adaptor untuk API WebGL 2 Pemutar YouTube. Anda dapat menambahkan fungsi video YouTube ke aplikasi WebP 3 atau Flex dengan mudah menggunakan pemutar YouTube sepenuhnya atau pemutar Chrome tanpa chrome. TubeLoc menggunakan class LocalConnection dalam berkomunikasi dengan SWF mediator eReader 2. WebP 2 SWF berkomunikasi dengan pemutar YouTube API resmi. Jadi, bagaimana cara kita menggunakan hal ini?
Lahan Tanah
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. Pada com/enefekt/tubeloc di direktori src, terdapat dua file. Movie.as adalah yang dapat Anda gunakan di project Flex, dan MovieSprite.as adalah yang dapat Anda gunakan di project eReader 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 apa yang Anda gunakan untuk mengembangkan, jadi periksa dokumentasi untuk lingkungan pengembangan Anda.
Setelah mengompilasi demo atau aplikasi, Anda memerlukan SWF 2 SWF 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, 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 melihat pemutar tanpa chrome BYOC. Berikut adalah cara Anda menggunakan pemutar Chrome penuh di MXML:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Tahukah saya, sakit? Bukan begitu. Jadi, mari menjadi gila dan lakukan dengan chrome:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Kami menambahkan rasa sakit dengan satu atribut lagi, selesai. Jadi, seperti inilah 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: Dalam elemen mx:Application, kita menambahkan namespace tubeloc dengan paket untuk komponen Film. Setelah melakukan ini, kita dapat menggunakan komponen tersebut seperti yang ditunjukkan. Nanti, kita akan melihat apa yang tersedia untuk ditetapkan dan dipanggil di komponen ini.
Menggunakan MovieSprite.as
Sekarang, mari kita lihat cara menggunakan TubeLoc versi WebGL 3. Versi ini tidak memerlukan class dari framework Flex, dan hanya menggunakan class native Flash Player. Kita akan melihat cara melakukan pemutar full-chrome 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 akan menambahkan pemroses peristiwa untuk PlayerReadyEvent. Di pengendali peristiwa onPlayerReady, kita menetapkan ukuran film. Catatan: Karena kita menggunakan pemutar Chrome sepenuhnya, kita memanfaatkan properti statis CHROME_HEIGHT pada class MovieSprite. Ini membantu kami mengukur film dengan mempertimbangkan tinggi krom.
Oke, jadi 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 bedanya? Dalam konstruktor, kita meneruskan null untuk ID video, dan parameter true kedua memberi tahu class MovieSprite bahwa kita akan menggunakan chromeless. Anda juga akan melihat perbedaan dalam pengendali peristiwa onPlayerReady. Di sinilah kita memuat video berdasarkan ID, menggunakan metode loadVideoById.
Apa yang Dapat Saya Telepon, Apa yang Dapat Saya Dapatkan?
Jadi, apa yang bisa kita hubungi, dan acara apa yang harus kita kerjakan? Dalam arsip rilis yang Anda download, terdapat dokumentasi kode lengkap untuk mendapatkan detail. Sebagai ringkasan singkat, baik untuk Movie.as dan MovieSprite.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, dalam 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 acara 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 Anda. Ada batasan yang perlu diperhatikan saat Anda mengembangkan dengan TubeLoc: Anda tidak boleh memiliki dua pemutar YouTube di atas panggung secara bersamaan.
Semoga masalah ini akan teratasi pada waktunya. Jadi, saat Anda menemukan bug atau beberapa fitur kurang, kunjungi project Google Code dan laporkan di issue tracker. Terima kasih sudah membaca!
Biografi Penulis
Ben Longoria adalah Developer Aplikasi Akademik untuk University of Wisconsin-Madison. Ia telah mengembangkan aplikasi dengan Flash sejak Flash 5, dan Flex sejak rilis Flex 2. Selama 2 tahun terakhir ia juga telah mengembangkan aplikasi yang didukung Mozilla. Beni telah mengerjakan sejumlah proyek pendidikan dan akademik, termasuk aplikasi lintas platform yang menargetkan browser dan juga desktop. Ia terlibat aktif dalam antarmuka dan desain interaksi, serta menikmati tantangan 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.