Bu makale harici bir geliştirici tarafından yazılmış ve gönderilmiştir. YouTube API'leri ve Araçları ekibi, Matthew Richmond'a zaman ve uzmanlığı için teşekkür ediyor.
Matthew Richmond, The Chopping Block, Inc.
Ekim 2008
- Giriş
- Önemli Kaynaklar
- Ayrıntılı bilgi
- Oyuncuyla Etkileşim
- Kullanılabilir İşlemler
- Demodaki Notlar
- Sonuç
Giriş
Bu makalede, Chrome içermeyen YouTube Player için güvenilir bir ActionScript 3.0 Sarmalayıcı sunusu ve kısaca açıklanmaktadır. Sarmalayıcı, ActionScript'in ExternalInterface sınıfından ve YouTube'un JavaScript API'sinden yararlanır.
Google'ın YouTube Oynatıcı Araçları ve Chromeless Player, tasarımcıların/geliştiricilerin YouTube'un gücünü hızlı bir şekilde online projelerine entegre etmelerini sağladı. Bu yaklaşım, video barındırmaya izin vermeyen sabit bütçeli küçük projelerin yanı sıra, YouYube hedef kitlesinden uzaklaşmadan özel bir son kullanıcı deneyimi isteyen müşteriler için büyük ölçekli projeler için idealdir.
Şekil 1: ActionScript 3.0 Sarmalayıcı Ekran Görüntüsü
YouTube'un Flash API'sı ve yerleşik oynatıcıları yazılır ve bunlar ActionScript 2.0 ile oldukça iyi çalışır. Ancak projeniz ActionScript 3.0 ise sorunsuz entegrasyon biraz daha karmaşık bir hale gelir. ActionScript 2.0 oynatıcılarını bir ActionScript 3.0 swf'sine yüklemek kolay olsa da, çalışır durumdaki çağrıları yüklenen oynatıcıya doğrudan iletemez veya iletemezsiniz. YouTube'un sunucularından gelen swf dosyası bir videoyu kendine yüklediği için bu durum daha da karmaşıktır. Sarmalayıcımızın bu durumu tam olarak anlaması ve uygun şekilde hareket etmesi gerekiyor. Neyse ki ActionScript dili, iç içe yerleştirilmiş ancak bağlantısı kesilmiş parçaları yeniden bağlamak için iki makul geçici çözüm içeriyor: LocalConnection sınıfı veya ExternalInterface sınıfı. Bu demo, ExternalInterface iyi belgelenmiş JavaScript API'siyle sorunsuz çalıştığından ve bu nedenle XHTML sayfasındaki diğer her şeyle iyi çalıştığından ikincisine odaklanacaktır.
Önemli Kaynaklar
Başlamadan önce, kullanabileceğiniz ilgili kaynakların ve dosyaların listesini burada bulabilirsiniz. Bu makalede ele alınan konuların çoğu, aşağıdaki bağlantılarda daha ayrıntılı olarak açıklanmıştır.
- ActionScript 3.0 Sarmalayıcı'yı görüntüleyin ve kaynak dosyaları indirin
- Resmi YouTube JavaScript Oynatıcı API Referansı
- Adobe ExternalInterface Sınıfı Belgeleri
- SWFObject JavaScript Flash yerleştirme
Ayrıntılı İnceleme
Sarmalayıcı Demosuna Genel Bakış
Şekil 3: JavaScript Dosyası
Şekil 2: ActionScript Sınıf Dosyaları
ActionScript 3.0 Sarmalayıcı, temelde birbirine bağlanmış iki bölümden oluşur: src/choppingblock/video/ konumunda yer alan ActionScript 3.0 sınıf dosyaları (Şekil 2) ve dağıtım/_assets/js/ içinde yer alan "youTubeLoader.js" JavaScript dosyası (Şekil 3). Flash/Flex kaynak dosyanız, YouTubeLoader ActionScript sınıfının bir örneğini oluşturur; XHTML sayfanız, Flash dosyasını yerleştirir ve YouTubeLoader JavaScript dosyasındaki işlevlerle kaydeder. Burada, YouTubeLoader'ın flash dosyasında yaptığı her şeyin JavaScript işlevleriyle kontrol edildiğini anlamak kritik öneme sahiptir.
Flash'taki tüm işlevler JavaScript API'sı üzerinden kontrol edildiğinden Flash'ın 'Test Filmi' oynatıcısına YouTube içeriği yükleyemezsiniz. Bu ayar yalnızca bir XHTML sayfasına yerleştirildiğinde ve sizTubeTuber JavaScript işlevlerine doğru şekilde bağlandığında çalışır.
Not: Bu oynatıcılardan herhangi birini test etmek için dosyanızı bir web sunucusunda çalıştırmanız veya Flash oynatıcı, yerel dosyalar ile İnternet arasındaki çağrıları kısıtladığından Flash Oynatıcınızın Güvenlik Ayarlarını değiştirmeniz gerekir.
YouTubeLoader Nesnesi Oluşturma
Flash/Flex projenizde YouTubeLoader Nesnesi örneği oluşturmadan önce, gerekli dosyalardan oluşan paketin (klasörün) projenizle aynı dizinde olduğundan (Şekil 2'ye bakın) veya projeleriniz için Classpath ile tanımlandığından emin olmanız gerekir. Ardından paket dosyalarını içe aktarabilirsiniz:
import choppingblock.video.*;
Bu, ActionScript dosyanızın "YouTubeLoader.as" ve "YouTubeLoaderEvent.as" sınıflarına erişmesine olanak tanır. Artık YouTubeLoader sınıfının ve gerekli etkinlik işleyicilerin bir örneğini oluşturmak için hazırsınız:
import choppingblock.video.*;
public class YouTubeDemo extends Sprite {
private var _youTubeLoader:YouTubeLoader;
// ------------------------------------
// CONSTRUCTOR
// ------------------------------------
public function YouTubeDemo () {
// create YouTubeLoader object
_youTubeLoader = new YouTubeLoader();
// add event listener to call youTubePlayerLoadedHandler method on load
_youTubeLoader.addEventListener(YouTubeLoaderEvent.LOADED, youTubePlayerLoadedHandler);
// create the actual loader
_youTubeLoader.create();
// add object to the display stack
addChild(_youTubeLoader);
};
// ------------------------------------
// EVENT METHODS
// ------------------------------------
/**
Called via player loaded event, lets you know you are all clear to send player commands.
*/
private function youTubePlayerLoadedHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeDemo: youTubePlayerLoadedHandler");
// you are now clear to start making calls to the YouTubeLoader object
};
};
JavaScript dosyasının yerine yerleştirilmesi ve düzgün şekilde bağlanması durumunda youTubePlayerLoadedHandler artık başarıyla çağrılmalıdır, biz de istekte bulunmaya hazırız.
swf dosyasını yerleştirme ve YouTubeLoader JavaScript'ini bağlama
swf dosyanız bir XHTML dosyasına yerleştirilinceye ve siz YouTubeTuber JavaScript'ine bağlanana kadar YouTube'dan içerik başarılı bir şekilde yükleyemezsiniz. JavaScript API'sı kullanılarak erişilecek oynatıcıları yerleştirmek için SWFObject kullanmanızı öneririz. Bu, son kullanıcının Flash Player sürümünü tespit etmenize olanak tanır (JavaScript API'sı, Flash Player 8 veya üzerini gerektirir) ve oynatıcıyı görüntülemek için Internet Explorer'ı kullanırken "Bu denetimi etkinleştirmek için tıklayın" kutusundan da kurtulur.
XHTML dosyanızın <head> bölümünde, swfobject ve YouTubeLoader dosyalarını bağlarsınız:
<script type="text/javascript" src="_assets/js/swfobject.js"></script> <script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>
ActionScript 3.0 swf'nizi JavaScript API'si etkinleştirilmiş olarak yerleştirmek için SWFObject kullanma ve ardından, YouTube'a youTubeLoader JavaScript API'sine bir referans iletme örneği için aşağıya bakın.
<script type="text/javascript">
var flashvars = {};
var params = {
menu: "false",
allowScriptAccess: "always",
scale: "noscale"
};
var attributes = {
id: "youtubewrapper"
};
swfobject.embedSWF("YouTubeIntegrationDemo.swf", "flashcontent", "960", "500", "9.0.0", "_assets/swf/expressInstall.swf", flashvars, params, attributes);
//init the youTubeLoader JavaScript methods
SWFID = "youtubewrapper"
</script>
Chromesuz Oynatıcı'nın XHTML sayfasından farklı bir alanda barındırılması nedeniyle koddaki allowScriptAccess parametresi, oynatıcı SWF'sinin kapsayıcı HTML sayfasındaki işlevleri çağırmasına izin vermek için gereklidir.
Bizim ilettiğimiz tek özellik, yerleştirme nesnesinin kimliğidir (bu örnekte, youtubewrapper). youTubeLoader.js dosyası, getElementById() öğesini kullanarak oynatıcıya referans almak için kullanılır.
swfobject.embedSWF, oynatıcıyı YouTube'dan yükleyecek ve sayfanıza yerleştirecek.
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
swfUrlStr- Bu, SWF'nin URL'sidir. JavaScript API çağrılarını etkinleştirmek içinenablejsapiveplayerapiidparametrelerini normal YouTube SWF URL'sine eklediğimizi unutmayın.replaceElemIdStr- Bu, yerleştirilmiş içerikle değiştirilecek HTML DIV kimliğidir. Yukarıdaki örnekte,ytapiplayerkullanılmıştır.widthStr- Oynatıcının genişliği.heightStr- Oynatıcının yüksekliği.swfVersionStr- Kullanıcının içeriği görmesi için gereken minimum sürüm. Bu durumda, sürüm 8 veya üzeri gereklidir. Kullanıcı 8 veya daha sonraki bir sürüme sahip değilse HTML DIV öğesinde varsayılan metin satırını görür.xiSwfUrlStr- (İsteğe bağlı) Ekspres yükleme SWF'nizin URL'sini belirtir. Bu örnekte kullanılmaz.flashVarsObj- (İsteğe bağlı) FlashVar öğelerinizi ad:değer çiftlerinde belirtir. Bu örnekte kullanılmaz.parObj- (İsteğe bağlı) Yerleştirme nesnesinin parametreleri. Bu örnekte,allowScriptAccessözelliğini ayarladık.AttObj- (İsteğe bağlı) Yerleştirme nesnesinin özellikleri. Bu durumda, kimliğimyytplayerolarak ayarladık.
Daha fazla açıklama için SWFObject belgelerine bakın.
SWFID ≡ , JavaScript API'nin kullanması için yerleştirme nesnesinin kimliğine bir referans kaydeder. swf için verdiğiniz yerleştirme nesnesinin kimliğini kullanmanız gerekir.
SWFID ≡ "youtubewrapper"
Bu noktada projenizi başarılı bir şekilde test edebilmeniz gerekir. YouTubeLoader nesnesi Chromeless Player'ı yüklemeli ve YouTubeLoaderEvent.LOADED etkinlik işleyici başarıyla çağrılmalıdır. Artık video isteğinde bulunmaya ve YouTubeLoader nesnesiyle etkileşimde bulunmaya hazırız.
Oyuncuyla Etkileşim
Chromeless Player için ActionScript 3.0 Sarmalayıcı oluşturmaya yönelik bu yaklaşım, ActionScript'in ExternalInterface sınıfından yararlandığından, artık yüklü oynatıcımızı kontrol etmek için YouTube JavaScript Player API'si içindeki İşlemlerin herhangi birini kullanabiliriz. Distribution/_assets/js/ içinde bulunan "youTubeLoader.js" JavaScript dosyasına baktığınızda (Şekil 3), dosyanın mevcut işlevlerin çoğunu içerdiğini görürsünüz. Her işlem işlevi, ilk olarak checkObj işlevini kontrol ederek SWFID değişkeninin çalıştırılmadan önce düzgün şekilde ayarlandığını doğrular.
//------------------------------------
// UTILITY METHODS
//------------------------------------
function checkObj () {
// alert("youTubeLoader.js : checkObj");
if (SWFID) {
createObj();
return true;
} else{
alert("YouTubeLoader: In order to call methods within a swf, you must first set the variable \"SWFID\"!");
return false;
};
}
//------------------------------------
// YOUTUBE METHODS
//------------------------------------
function loadVideoById(id, startSeconds) {
// alert("youTubeLoader.js : loadVideoById");
if (checkObj()) {
obj.loadVideoById(id,startSeconds);
};
};
function cueNewVideo(id, startSeconds) {
// alert("youTubeLoader.js : loadVideoById");
if (checkObj()) {
obj.cueVideoById(id, startSeconds);
}
}
function clearVideo() {
// alert("youTubeLoader.js : clearVideo");
if (checkObj()) {
obj.clearVideo();
}
}
// plus 17 more...
Chromeless Player için ActionScript 3.0 Sarmalayıcımızın nihai amacı, ActionScript 3.0 Flash/Flex projesi içinde YouTube API ile sorunsuz bir etkileşim sunmak olduğundan, src/choppingblock/video/ adresinde yer alan "YouTubeLoader.as" sınıf dosyasına tam olarak aynı herkese açık yöntemleri ekledik (Şekil 2). Bu sayede aynı işlemleri doğrudan Flash/Flex içindeki YouTubeLoader Object'e çağırabilirsiniz. Sınıf dosyasına bakarsanız şunları görürsünüz:
// ------------------------------------
// YOUTUBE METHODS
// ------------------------------------
public function loadVideoById (id:String, startSeconds:Number = 0):void{
//trace("YouTubeLoader: loadVideoById");
ExternalInterface.call("loadVideoById", id, startSeconds);
};
public function cueNewVideo (id:String, startSeconds:Number = 0):void{
//trace("YouTubeLoader: cueNewVideo");
ExternalInterface.call("cueNewVideo", id, startSeconds);
};
public function clearVideo ():void{
//trace("YouTubeLoader: clearVideo");
ExternalInterface.call("clearVideo");
};
// plus 17 more...
ActionScript yöntemleri, JavaScript API'sındaki uygun işlevi çağırmak için ExternalInterface sınıfını kullanır.
Video İsteme
Artık oynatıcı referansını kullanarak işlevleri çağırarak ActionScript 3.0 dosyanızdan video isteyebilirsiniz. Örneğin, bir kullanıcı bir düğmeyi tıkladığında videoyu oynatmak isterseniz düğmenize bir S.C.etkinlik etkinliği dinleyicisi eklersiniz. Aşağıdaki gibi:
// assuming your button was called 'myButton' myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);
Ardından, isteği işlemek için bir etkinlik işleyici yöntemi oluşturun. Aşağıdaki gibi:
private function youtubeLoadVideoHandler (event:MouseEvent):void{
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
_youTubeLoader.loadVideoById( "u1zgFlCw8Aw" );
};
Flash/Flex dosyanızın dışında, isteğe bağlı olarak ilgili JavaScript işlevini doğrudan çağırarak bir video isteyebilirsiniz. Aşağıdaki gibi:
<a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a>
Ek Çağrılar Yapma
Ek aramalar tam olarak Video İsteme gibi çalışır. ActionScript 3 içinde oynatıcı referansını kullanarak yöntemleri çağırabilirsiniz. Kullanılabilir yöntemlerin tam listesini aşağıda bulabilirsiniz.
Etkinliklere Abone Olma
Oynatıcı referansına bir etkinlik işleyici ekleyerek etkinliklere abone olun. Örneğin, oyuncunun durumu değiştiğinde bildirim almak istiyorsanız YouTubeLoaderEvent.STATE_CHANGE için bir etkinlik işleyici ekleyin. Aşağıdaki gibi:
// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object _youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);
Ardından, isteği işlemek için bir etkinlik işleyici yöntemi oluşturun. Aşağıdaki gibi:
private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
//trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
_stateField.text = event.state;
};
Kullanılabilir İşlemler
YouTubePlayer API yöntemlerini çağırmak için önce ActionScript dosyanızda YouTubePlayer sınıfının bir örneğini oluşturmanız ve kontrol etmek istediğiniz YouTubePlayer nesnesine bir referans depolamanız gerekir. Bunun için şu numarayı arayabilirsiniz:
var _youTubeLoader:YouTubeLoader; _youTubeLoader = new YouTubeLoader();
Herkese Açık Yöntemler
player.loadVideoById(id:String, startSeconds:Number = 0):void- Belirtilen kimliğe göre videoyu yükler ve oynatır.
player.cueNewVideo(id:String, startSeconds:Number = 0):void- Video yüklenir ancak belirtilen kimliğe göre otomatik olarak oynatılmaz.
player.clearVideo():void- Şu anda seçilmiş/yüklenen videoyu temizler.
player.setSize(w:Number, h:Number):void- YouTubePlayer örneğinin boyutunu ayarlar.
player.play():void- Şu anda seçilmiş/yüklenen videoyu oynatır.
player.pause():void- Şu anda seçilmiş/yüklenen videoyu duraklatır.
player.stop():void- Şu anda seçilmiş/yüklenen videoyu durdurur.
player.seekTo(seconds:Number):void- Şu anda seçilmiş/yüklenen videoda belirtilen zamanı arar.
player.getPlayerState():String- Şu anda seçilmiş/yüklenen videonun geçerli durumunu döndürür.
player.getBytesLoaded():Number- Şu anda kırpılmış/yüklenen videonun yüklü baytlarının değerini döndürür.
player.getBytesTotal():Number- Şu anda seçilmiş/yüklenen videonun toplam baytlarının değerini döndürür.
player.getCurrentTime():Number- Şu anda seçilmiş/yüklenen videonun zamanında mevcut konumunu döndürür.
player.getDuration():Number- Şu anda seçilmiş/yüklenen videonun geçerli süresini döndürür.
player.getStartBytes():Number- Şu anda kırpılmış/yüklenen videonun başlangıç baytını döndürür.
player.setVolume(newVolume:Number):void- Şu anda seçilmiş/yüklenen videonun hacmini ayarlar.
player.getVolume():Number- Şu anda seçilmiş/yüklenen videonun geçerli hacmini döndürür.
player.mute():void- Mevcut sesi depolar ve şu anda kırpılmış/yüklenen videonun sesini 0 olarak değiştirir.
player.unmute():void- Şu anda kırpılmış/yüklenen videonun sesini, sesi kapatıldığında son saklanan değere döndürür.
player.getEmbedCode():String- Şu anda seçilmiş/yüklenen videonun mevcut YouTube yerleştirme kodunu döndürür.
player.getVideoUrl():String- Şu anda seçilmiş/yüklenen videonun mevcut YouTube video URL'sini döndürür.
Etkinlikler
YouTubeLoaderEvent.LOADED- Chromeless oynatıcı, yükleme işlemini başarıyla tamamladıktan ve işlem çağrılarını kabul etmeye hazır olduğunda tetiklenir.
YouTubeLoaderEvent.STATE_CHANGE- Oyuncunun durumu değiştiğinde etkinleşir. YouTubeLoader sınıfı, JavaScript API numaralarını ilgili dize değerlerine çevirir. YouTubeLoaderEvent sınıfı, mevcut etkinliği
stateadlı bir değişkende depolar. Olası değerler başlatılmamış, sona erdi, oynatılıyor, duraklatıldı, arabelleğe alındı, video seçildi. SWF ilk kez yüklendiğinde başlatılmamış bir etkinlik yayınlar. Video derlenip oynatılmaya hazır olduğunda, video seçilmiş bir etkinliği yayınlar. YouTubeLoaderEvent.IO_ERROR- Oynatıcıda hata oluştuğunda tetiklenir. Olası iki hata kodu vardır: İstenen video bulunamadığında 100 sayısı yayınlanır. Bu durum, bir video kaldırıldığında (herhangi bir nedenle) veya gizli olarak işaretlendiğinde ortaya çıkar. 101 değeri, istenen videonun yerleştirilmiş oynatıcılarda oynatılmasına izin vermediğinde yayınlanır.
Demodaki Notlar
Tanıtım amacıyla, XHTML form alanlarını, düğmeleri ve görüntülü reklam kullanıcı arayüzünü yerleştirilmiş ActionScript 3 Sarmalayıcı'nın altına eklemek istedik. swf dosyasının VE XHTML dosyasının aynı anda güncellenmesini sağlamak için, "disa/_assets/js/" konumunda bulunan "youTubeLoader.js" JavaScript dosyasına iki satır kod dahil etmemiz gerekiyordu (Şekil 3). Bu dosyayı projenize entegre ederken aşağıdaki iki satırı [69, 79] kaldırmak istersiniz:
//------------------------------------
// SPECIAL YOUTUBE EVENT METHODS
//------------------------------------
function onYouTubePlayerReady(playerId) {
if (checkObj()) {
obj.addEventListener("onStateChange", "onytplayerStateChange");
};
// PLEASE NOTE: For the purpose of this demo:
// This calls a secondary method located in the index.html file allowing the html display to update.
// You will most likely not need this, it's gross, remove this when you implement this code.
secondaryOnYouTubePlayerReady(playerId);
}
function onytplayerStateChange(newState) {
//alert("Player's new state: " + newState);
obj.playerStateUpdateHandler(newState);
// PLEASE NOTE: For the purpose of this demo:
// This calls a secondary method located in the index.html file allowing the html display to update.
// You will most likely not need this, it's gross, remove this when you implement this code.
secondaryOnytplayerStateChange(newState)
}
Demo dosyası ve birlikte verilen ActionScript kitaplıkları ücretsiz yazılımdır: GNU Küçük Genel Kamu Lisansı koşulları uyarınca dosyayı yeniden dağıtabilir ve/veya değiştirebilirsiniz. Bu dosyalar, yararlı olacağı umuduyla dağıtılır ancak garanti verilmez.
Sonuç
Bu makalede, demo ve kaynak dosyalar, kendi projeleriniz için geliştirdiğimiz sarmalayıcı kitaplığını kullanarak YouTube API'yi ve yerleşik oynatıcıları ActionScript 3 ortamlarına entegre etmeye yönelik, nispeten basit ve güvenilir bir çözümle ilgili sağlam bir genel bakış sunmaktadır. Kodun büyük kısmına yorum yaptığım için kitaplıkları keşfetmek ve amacın yeniden oluşturulmasını sağlamak gayet kolay. Bu yöntemin kullanımında herhangi bir sınırlama yoktur ve iyileştirme, yeniden düzenleme ve iyileştirme için her zaman yer vardır. Bu konuda herhangi bir sorunuz varsa bizimle iletişime geçebilirsiniz.
Yazarın Biyografisi
Matthew Richmond, 14 yıllık etkileşimli tasarım, geliştirme ve mimari deneyimine sahiptir. Stüdyoda değilken Masaüstü ve Görsel Sanatlar Okulu'nda dijital resim/fotoğrafçılık tekniklerini ve ileri düzey ActionScript'i öğretebilir. Matthew, choppingblock.com adresinde kurucu iş ortağı ve tasarımcıdır.