Bu makale, harici bir geliştirici tarafından yazılmış ve gönderilmiştir. YouTube API Ekibi, zaman ayırıp uzmanlığını paylaştığı için Ben Longoria'ya teşekkür eder.
Ben Longoria, Wisconsin Üniversitesi - Madison, Akademik Teknoloji
Şubat 2009
- Giriş
- Mevcut durum
- Movie.as'ı kullanma
- MovieSprite.as dosyasını kullanma
- Neleri Arayabilirim, Neleri Alırım?
- Sonuç
Giriş
Şekil 1: TubeLoc Chromeless Player Demo
Vay canına! Bu makalenin yazıldığı tarihten yaklaşık bir ay sonra YouTube Player API bir yaşına girecek. Bu kaç internet yılı? API'yi temel alan birçok başarılı proje geliştirildi. YouTube Developer API Blogu'nu takip ederek bu API ile harika işler başaran çok sayıda kullanıcı olduğunu görebilirsiniz.
Mevcut YouTube API oynatıcı uygulamaları ActionScript 2 ile yazılmıştır. Bu, kullanımı hâlâ mükemmel bir dil olsa da birçok kullanıcı artık ActionScript 3 ve/veya Flex kullanmaktadır. Sorun, ActionScript 2 uygulamalarının ActionScript 3 uygulamalarıyla iletişim kurması için birkaç işlem yapmanız gerektiğidir. "Ama bekleyin... Bunu daha önce duymuştum. Bunun için zaten bir şey yok mu?" diye sorabilirsiniz.
Bu konuda bilgi sahibi olan birçok kullanıcı, YouTube API Geliştirici Forumları'nda deneyimlerini paylaşmıştır. Ayrıca, geliştiricilerin bu özelliği daha kolay kullanabilmesi için AS3 Chromeless Wrapper ve Flex Embedded Player projeleri de geliştirildi.
Player API işlevini yalnızca ActionScript 3 veya MXML'de yeniden kullanmanın kolay ve basit bir yolunu bulmak istedim. Flex'e alerjisi olan projeler için Flex içermeyen bir sınıf ve Flex'i seven projeler için kullanımı kolay bir Flex bileşeni. TubeLoc her iki koşulu da karşıladı
TubeLoc (YouTube ve LocalConnection'ın bir mashup'ı), YouTube ActionScript 2 Player API'si için bağdaştırıcı görevi gören bir ActionScript 3 kitaplığıdır. Tam krom veya kromsuz YouTube oynatıcılarla ActionScript 3 veya Flex uygulamalarınıza YouTube video işlevini kolayca ekleyebilirsiniz. TubeLoc, ActionScript 2 arabulucu SWF'siyle iletişim kurarken LocalConnection sınıfını kullanır. ActionScript 2 SWF, resmi YouTube API oynatıcısıyla iletişim kurar. Peki bu cihazı nasıl kullanacağız?
Mevcut durum
Öncelikle, kitaplığın mevcut sürümünü Google Code projesinden indirmeniz gerekir. Sürümün zip arşivini açtıktan sonra içinde bir as3 dizini görürsünüz. Bunun altında, bazı örnek sınıfları içeren src dizini bulunur. Bu bilgileri başlangıç noktası olarak kullanabilirsiniz. src dizininde com/enefekt/tubeloc altında iki dosya var. Movie.as, Flex projelerinizde kullanabileceğiniz, MovieSprite.as ise ActionScript 3 projelerinizde kullanabileceğiniz birer sarmalayıcıdır. com/enefekt/tubeloc/event içinde, oynatıcıdan gönderilebilecek farklı bildirimler için çeşitli etkinlik sınıfları vardır.
Bu eğitimdeki örnekleri denemeden önce, as3 dizinindeki src dizininin sınıf yolunuzda bulunduğundan emin olun. Bu işlemi yapma süreci, geliştirme için kullandığınız araçlara göre değişir. Bu nedenle, geliştirme ortamınızın dokümanlarını inceleyin.
Demonuzu veya uygulamanızı derledikten sonra YouTube Player API ile iletişim kuran ActionScript 2 SWF'ye ihtiyacınız olacaktır. Bu SWF'yi şu sürüm arşivinde bulabilirsiniz: as3/lib/as2_tubeloc.swf. 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: Kitaplıkla birlikte playerWrapperUrl mülkünü kullanarak bu SWF'nin yolunu değiştirebilirsiniz.
Movie.as'ı kullanma
TubeLoc'un Flex sürümünün nasıl kullanılacağına göz atalım. Önce tüm kontrolleri içeren tam Chrome oynatıcıya, ardından BYOC denetim içermeyen oynatıcıya bakacağı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, biliyorum, acı verici değil mi? Hiç de değil. Şimdi de çılgınlık yapıp kromsuz bir görünüme geçelim:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
Bir özellik daha ekleyerek bu sorunu daha da artırıyoruz. MXML dosyasının tamamı şu şekilde 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, Film bileşeninin paketiyle birlikte tubeloc ad alanını ekleriz. Bunu yaptıktan sonra bileşeni gösterildiği gibi kullanabiliriz. Daha sonra bu bileşende nelerin ayarlanabileceğine ve çağrılabileceğine bakacağız.
MovieSprite.as dosyasını kullanma
Şimdi TubeLoc'un ActionScript 3 sürümünün nasıl kullanılacağına bakalım. Bu sürüm, Flex çerçevesindeki sınıfları gerektirmez ve yalnızca Flash Player yerel sınıflarını kullanır. Önce tam Chrome oynatıcıyı, ardından denetim içermeyen oynatıcıyı nasıl oluşturacağınıza bakacağız. Tam örneği aşağıda bulabilirsiniz:
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ırız. Ardından, kurucuda MovieSprite sınıfının bir örneğini oluşturup video kimliğimizi MovieSprite'ın kurucusuna iletiriz. Ardından PlayerReadyEvent için bir etkinlik işleyici ekleriz. onPlayerReady etkinlik işleyicisinde, filmin boyutunu ayarlarız. Not: Tam Chrome oynatıcıyı kullandığımız için MovieSprite sınıfındaki statik CHROME_HEIGHT özelliğinden yararlanıyoruz. Bu sayede, kromun yüksekliğini dikkate alarak filmi boyutlandırabiliriz.
Peki denetim içermeyen oynatıcı ne olacak?
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, ne değişti? Oluşturucuda, video kimliği için null değerini iletiriz ve ikinci true parametresi, MovieSprite sınıfına Chrome'u kullanmayacağımız bilgisini verir. onPlayerReady etkinlik işleyicisinde de bir fark göreceksiniz. Burada, loadVideoById yöntemini kullanarak videomuzu kimliğe göre yüklüyoruz.
What Can I Call, What Do I Get?
Peki hangi etkinlikleri çağırabiliriz ve hangi etkinliklerle çalışmamız gerekiyor? Ayrıntıları öğrenmek için indirdiğiniz sürüm arşivine göz atabilirsiniz. Hızlı bir genel bakış olarak, hem Movie.as hem de MovieSprite.as için aşağıdaki yöntemlere sahipsiniz:
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 Movie.as bileşeninde aşağıdaki ö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 aşağıda verilmiştir. Daha fazla bilgiyi dokümanda bulabilirsiniz.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
Sonuç
Bu makalenin, YouTube işlevlerini ve içeriklerini Flash uygulamalarınıza entegre etmenize yardımcı olduğunu umuyoruz. TubeLoc ile geliştirirken göz önünde bulundurmanız gereken bir sınırlama vardır: Sahnede aynı anda iki YouTube oynatıcı olamaz.
Bu sorunun kısa süre içinde çözüleceğini umuyoruz. Bu nedenle, hata veya eksik bir özellik gördüğünüzde lütfen Google Code projesini ziyaret edip sorun izleyiciye bildirin. Bu e-postayı okuduğunuz için teşekkür ederiz.
Yazar Biyografisi
Ben Longoria, Wisconsin-Madison Üniversitesi'nde Akademik Uygulamalar Geliştiricisi olarak görev yapıyor. Flash 5'ten beri Flash ile, Flex 2'den beri de Flex ile geliştirme yapıyor. Son 2 yıldır Mozilla destekli uygulamalar da geliştiriyor. Ben, hem tarayıcı hem de masaüstü sürümünü hedefleyen platformlar arası uygulamalar da dahil olmak üzere çeşitli eğitim ve akademik projelerde çalıştı. Arayüz ve etkileşim tasarımında aktif bir rol üstlenen Cem, kullanılabilir yazılımlar oluşturma konusundaki zorluklardan keyif alıyor. 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ında lisanslanmıştır.