Bu makale harici bir geliştirici tarafından yazılmış ve gönderilmiştir. YouTube API Ekibi, Ben Longoria'ya zaman ayırıp uzmanlıkları için teşekkür ediyor.
Ben Longoria, Wisconsin Üniversitesi - Madison, Akademik Teknoloji
Şubat 2009
- Giriş
- The Lay of the Land
- Movie.as aracını kullanma
- MovieSprite.as dosyasını kullanma
- Ne çağırabilirim, Ne Alabilirim?
- Sonuç
Giriş
Şekil 1: TubeLoc Chromeless Player Demosu
Vay canına! YouTube Player API, yaklaşık bir ay içinde bu tarihte kullanıma sunulacaktır. Kaç yıllık internet? API'yi temel alan bir dizi muhteşem proje yapıldı. YouTube Developer API Blogu'nu takip ederek büyük işler yapan çok sayıda kullanıcı olduğunu görebilirsiniz.
Mevcut YouTube API oynatıcı uygulamaları grubu ActionScript 2'de yazılmıştır. Bununla birlikte, bu dil hâlâ iyi bir dil olsa da çoğu kişi ActionScript 3 ve/veya Flex'i kullanmaktadır. Sorun, ActionScript 2 uygulamalarının ActionScript 3 uygulamalarıyla iletişim kurabilmesi için birkaç atlama işlemi yapmanızdır. "Ama bir dakika... Bunu daha önce duymuştum. Bunun için henüz bir şey yok mu?" diye sorabilirsiniz.
Çok sayıda kişi, bunu nasıl yapabileceklerini çoktan öğrenmiş ve YouTube API Geliştirici Forumlarına maharetlerini göstermiştir. Geliştiricilerin kullanımını kolaylaştırmak için AS3 Chromeless Wrapper ve Flex Embedded Player projeleri de sunulmuştur.
Player API işlevini yalnızca ActionScript 3 veya MXML'de yeniden kullanmanın kolay ve basit bir yolunu arıyordum. Bu Flex alerjik projeler için Flex içermeyen bir sınıf ve Flex'e önem veren projeler için kullanımı kolay bir Flex bileşeni. TubeLoc her iki şartı da karşıladı
TubeLoc (YouTube ve LocalConnection'ın mashup'ı), YouTube ActionScript 2 Player API'si için bağdaştırıcı görevi gören bir ActionScript 3 kitaplığıdır. ActionChrome 3 veya Flex uygulamalarınıza tam Chrome veya chromeless YouTube oynatıcılarıyla YouTube video işlevini kolayca ekleyebilirsiniz. TubeLoc, ActionScript 2 arabulucusu SWF'si ile iletişim kurmak için LocalConnection sınıfını kullanır. ActionScript 2 SWF, resmi YouTube API oynatıcısıyla iletişim kurar. Peki bunu nasıl kullanıyoruz?
Toprak
Öncelikle, Google Code projesinden kitaplığın mevcut sürümünü indirmelisiniz. Sürüm zip arşivini paketten çıkardıktan sonra içinde bir as3 dizini görürsünüz. Bunun altında, bazı örnek sınıfların yer aldığı src dizini bulunur. Başlangıç noktası olarak bunlardan yararlanabilirsiniz. src dizinindeki com/enefekt/tubeloc altında iki dosya bulunur. Flex projelerinizde Movie.as, ActionScript 3 projelerinizde ise MovieSprite.as kullanabilirsiniz. com/enefekt/tubeloc/event ürününde, oyuncudan gönderilebilecek farklı bildirimler için çeşitli etkinlik sınıfları var.
Bu eğiticideki örnekleri denemeden önce as3 dizinindeki src dizininin sınıf yolunuzda olduğundan emin olun. Bu işlemi yapmak için geliştirme sürecinizde kullandığınız yönteme göre değişiklik gösterir. Bu nedenle, geliştirme ortamınıza ilişkin dokümanları inceleyin.
Demonuzu veya uygulamanızı derledikten sonra, YouTube Player API ile iletişim kuran ActionScript 2 SWF'ye ihtiyacınız olur. Bu SWF'yi şu sürüm arşivinde bulabilirsiniz: as3/lib/as2_tubeloc.swf. Bunun, sadece SWF uygulamanızı yerleştiren HTML dosyasının yanında olduğundan emin olun. Örneğin:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
Not: Bu SWF'nin yolunu, kitaplıkla birlikte playerWrapperUrl özelliğini kullanarak değiştirebilirsiniz.
Movies.as'i kullanma
TubeLoc'un Flex sürümünü nasıl kullanacağınıza göz atalım. Öncelikle tam Chrome oynatıcıya (tüm kontrollere sahip olanlar), ardından BYOC chromeless oynatıcıya göz atacağız. MXML'de tam Chrome oynatıcıyı şu şekilde kullanırsınız:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
Biliyorum, acıcı, değil mi? Hiç etkilemedi! Şimdi çılgınca deneyelim ve chrome'u yapalım:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Sıkıntılara yeni bir özellik daha ekliyoruz. MXML dosyasının tamamı aşağıdaki gibi görünür:
<?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>
Not: mx:Application öğesine tubeloc ad alanını Film bileşeni paketiyle birlikte ekleriz. Bu işlemin ardından bileşeni, gösterildiği gibi kullanabiliriz. Daha sonra, bu bileşende ayarlanabilecek ve çağrılacak özelliklere göz atalım.
MoviesSprite.as dosyasını kullanma
Şimdi TubeLoc'un ActionScript 3 sürümünü nasıl kullanacağımıza bakalım. Bu sürüm, Flex çerçevesinden sınıf verilmesini gerektirmez ve yalnızca Flash Player yerel sınıflarını kullanır. Önce tam Chrome oynatıcıyı, ardından Chromesuz oynatıcıyı nasıl yapacağınıza bakacağız. Aşağıda tam bir örnek verilmiştir:
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;
}
}
}
Öncelikle, gerekli TubeLoc sınıflarını içe aktarıyoruz. Ardından, oluşturucuda MovieSprite sınıfının bir örneğini oluşturur ve video kimliğimizi MoviesSprite oluşturucusuna iletiriz. Ardından, PlayerReadyEvent için bir etkinlik işleyici ekliyoruz. onPlayerReady etkinlik işleyicide filmin boyutunu ayarlıyoruz. Not: Tam Chrome oynatıcıyı kullandığımızdan, MovieSprite sınıfındaki CHROME_HEIGHT statik özelliğinden yararlanıyoruz. Bu, filmi Chrome'un yüksekliğini dikkate alarak boyutlandırmamıza yardımcı olur.
Peki, Chrome'suz oynatıcıda durum nedir?
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");
}
}
}
Peki, farkı nedir? Oluşturucuda video kimliği için null iletiyoruz ve ikinci true parametresi MovieSprite sınıfına Chrome'dan geçtiğimizi gösteriyor. Ayrıca, onPlayerReady etkinlik işleyicide bir fark göreceksiniz. loadVideoById yöntemini kullanarak videomuzu kimliğe göre yüklediğimiz yerdir.
Nasıl Arama Yapabilirim, Ne Alabilirim?
Peki, bizi neler bekliyor ve hangi etkinliklerle çalışmamız gerekiyor? İndirdiğiniz sürüm arşivindeki ayrıntıları öğrenmek için eksiksiz kod belgeleri mevcuttur. Özetle, hem Movies.as hem de MoviesSprite.as için aşağıdaki yöntemleri kullanabilirsiniz:
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
Bu yöntemlere ek olarak Movies.as bileşeninde de şu özelliklere erişebilirsiniz:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
Abone olabileceğiniz etkinlikler. Daha fazla bilgiyi belgelerde bulabilirsiniz.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Sonuç
Bu makalenin Flash işlevlerinize YouTube işlevlerini ve içeriğini entegre etmenize yardımcı olduğunu umarız. TubeLoc ile geliştirmeler yaparken aklınızda bulundurmanız gereken bir sınır var: Aynı anda sahnede iki YouTube oyuncunuz olamaz.
Bu işlemin, gereken süre içinde düzeltileceğini umuyoruz. Bu nedenle, hatalarla veya özelliklerin eksikleriyle karşılaşırsanız lütfen Google Code projesini ziyaret edip sorun izleyicide bildirin. Okuduğunuz için teşekkürler!
Yazarın Biyografisi
Ben Longoria, Wisconsin-Madison Üniversitesinin Akademik Uygulama Geliştiricisidir. Flash 5'ten beri Flash, Flex 2'den beri Flex ile gelişiyor. Son 2 yıldır Mozilla destekli uygulamalar da geliştiriyor. Ben, hem tarayıcıyı hem de masaüstünü hedefleyen platformlar arası uygulamalar dahil olmak üzere çeşitli eğitim ve akademik projeler üzerinde çalışmaktadır. Arayüz ve etkileşim tasarımında aktif bir rol üstlenir ve kullanılabilir yazılım oluşturma zorluğundan yararlanır. Blogunu http://enefekt.com/sansbrowser/ adresinde bulabilir ve InsideRIA'ya yaptığı katkıları okuyabilirsiniz.
Bu çalışma, Creative Commons Attribution 3.0 ABD Lisansı kapsamındadır.