Bu makale harici bir geliştirici tarafından yazılmış ve gönderilmiştir. YouTube API'leri ve Araçları Ekibi, zaman ayırıp uzmanlığını bizimle paylaşan Matthew Richmond'a teşekkür eder.
. Matthew Richmond, The Chopping Block, Inc.
Ekim 2008
- Giriş
- Önemli Kaynaklar
- Derinlemesine İnceleme
- Oyuncuyla Etkileşim
- Kullanılabilir İşlemler
- Demo Hakkında Notlar
- Sonuç
Giriş
Bu makalede, Chrome'suz YouTube Oynatıcı için güvenilir bir ActionScript 3.0 Wrapper'ı sunup kısaca özetleyeceğim. Sarmalayıcı, ActionScript'in ExternalInterface sınıfını ve YouTube'un JavaScript API'sini kullanır.
Google'ın YouTube Oynatıcı Araçları ve Chrome'suz Oynatıcı, tasarımcılara/geliştiricilere YouTube'un gücünü çevrimiçi projelerine hızlı ve kolay bir şekilde entegre etmeleri için olanak tanımıştır. Bu yaklaşım, video barındırmaya izin verilmeyen sabit bütçeli küçük projeler ve YouYube kitlelerinden uzaklaştırmadan ö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 gömülü oynatıcıları yazılmıştır ve ActionScript 2.0 ile oldukça iyi çalışır; projeniz ActionScript 3.0 ise sorunsuz entegrasyon biraz daha karmaşık hale gelir. ActionScript 2.0 oynatıcıları bir ActionScript 3.0 swf dosyasına yüklemek kolay olsa da yüklü oynatıcıyla doğrudan iletişim kuramaz veya işlevsel çağrılar iletemezsiniz. Bu daha da karmaşıktır, çünkü YourTube'un sunucularından gelen DRM dosyası videoyu kendi içine yükler. Sarmalayıcımızın bu durumun farkına varması ve buna göre tepki vermesi gerekir. Neyse ki ActionScript dili, iç içe yerleştirilmiş ancak bağlantısı kesilmiş bu parçaları yeniden bağlamak için LocalConnection sınıfı veya ExternalInterface sınıfı olmak üzere iki makul geçici çözüm içerir. Bu demo ikinciye odaklanacaktır, çünkü ExternalInterface, iyi belgelenmiş JavaScript API ile sorunsuz bir şekilde çalışmaktadır ve bu nedenle XHTML sayfasındaki diğer her şeyle iyi performans gösterir.
Önemli Kaynaklar
Başlamadan önce, kullanabileceğiniz ilgili kaynaklar ve dosyaların listesini burada bulabilirsiniz. Bu makalede ele alınan konuların birçoğu aşağıdaki bağlantılarda daha ayrıntılı olarak açıklanmaktadır.
- ActionScript 3.0 sarmalayıcısını görüntüleyin ve kaynak dosyaları indirin.
- Resmi YouTube JavaScript Oynatıcı API Referansı
- Adobe ExternalInterface Sınıfı Dokümanları
- SWFObject JavaScript Flash yerleştirmesi
Kazıklı Kalma
Sarmalayıcı Demosuna Genel Bakış
Şekil 3: JavaScript Dosyası
.
Şekil 2: ActionScript Sınıf Dosyaları
ActionScript 3.0 sarmalayıcısı, temel olarak birbirine bağlı iki kısımdan oluşur: src/choppingblock/video/ (Şekil 2) klasöründeki ActionScript 3.0 sınıf dosyaları ve deploy/_assets/js/ (Şekil 3) klasöründeki "youTubeLoader.js" JavaScript dosyası. 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şlevlere kaydeder. YouTubeLoader'ın flash dosyasında yaptığı her şeyin, buradan JavaScript işlevleri aracılığıyla kontrol edildiğini anlamak çok önemlidir.
Flash'taki tüm işlevler JavaScript API'sı aracılığıyla kontrol edildiğinden, Flash'ın "Test Filmi" içinde herhangi bir YouTube içeriği YÜKLEMEZSİNİZ. oynatıcıya gitmiş olur. Bu komut, yalnızca bir XHTML sayfasına gömülü olarak ve youTubeLoader JavaScript işlevlerine düzgün şekilde bağlanıldığında çalışır.
Not: Bu çağrılardan herhangi birini test etmek için dosyanızın bir web sunucusunda çalıştırılması veya Flash Player'ınızın Güvenlik Ayarları'nın değiştirilmesi gerekir. Çünkü Flash oynatıcı, yerel dosyalar ve internet arasındaki çağrıları kısıtlar.
YouTubeLoader Nesnesi Oluşturma
Flash/Flex projenizde YouTubeLoader Nesnesi örneğini oluşturabilmeniz için önce, gerekli dosya paketinin (klasörün) projenizle aynı dizinde olduğundan (bkz. Şekil 2) veya projeleriniz 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 bir örneğini ve gerekli etkinlik işleyicileri oluşturabilirsiniz:
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ı yerindeyse ve düzgün şekilde bağlandıysa youTubePlayerLoadedHandler başarıyla çağrılır ve istek göndermeye hazır oluruz.
CSV'yi Yerleştirme ve youTubeLoader JavaScript'ini Bağlama
Swf dosyanız bir XHTML dosyasına yerleştirilip youTubeLoader JavaScript'ine bağlanana kadar YouTube'dan içerik yükleyemezsiniz. JavaScript API'sı kullanılarak erişilecek oynatıcıları yerleştirmek için SWFObject kullanılmasını öneririz. Bu, son kullanıcının Flash Player sürümünü saptamanıza olanak tanır (JavaScript API'sı Flash Player 8 veya üzerini gerektirir) ve 'Bu denetimi etkinleştirmek için tıklayın' kutusunu işaretleyin.
XHTML dosyanızın <head> bölümünde, MOVobject'i ve YouTubeLoader dosyalarını bağlayın:
<script type="text/javascript" src="_assets/js/swfobject.js"></script> <script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>
SWFObject'u kullanarak ActionScript 3.0 swf dosyanızı JavaScript API'si etkinken yerleştirme ve ardından swf dosyanıza ait bir referansı youTubeLoader JavaScript API'sine iletme örneğini aşağıda bulabilirsiniz.
<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>
Chromeless Player, XHTML sayfasından farklı bir alanda barındırıldığı için oynatıcı SWF'sinin kapsayıcı HTML sayfasındaki işlevleri çağırmasına izin vermek için koddaki allowScriptAccess parametresi gerekir.
İlettiğimiz tek özellik, yerleştirilen nesnenin kimliğidir (bu örnekte youtubewrapper). Bu kimlik, youTubeLoader.js dosyasının getElementById() kullanarak oynatıcının referansını almak için kullanacağı kimliktir.
swfobject.embedSWF, oynatıcıyı YouTube'dan yükler ve sayfanıza yerleştirir.
swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)
swfUrlStr: SWF'nin URL'sidir. JavaScript API çağrılarını etkinleştirmek için normal YouTube SWF URL'sineenablejsapiveplayerapiidparametrelerini eklediğimizi unutmayın.replaceElemIdStr: Yerleştirilen içerikle değiştirilecek HTML DIV kimliğidir. Yukarıdaki örnekteytapiplayerolarak gösterilmiştir.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 daha yeni bir sürüm gerekir. Kullanıcının 8 veya daha yüksek sürümüne sahip olmaması durumunda HTML DIV'de varsayılan metin satırı gösterilir.xiSwfUrlStr: (İsteğe bağlı) Hızlı yükleme SWF'nizin URL'sini belirtir. Bu örnekte kullanılmamıştır.flashVarsObj- (İsteğe bağlı) FlashVar öğelerinizi ad:değer çiftlerinde belirtir. Bu örnekte kullanılmamıştır.parObj: (İsteğe bağlı) Yerleştirme nesnesinin parametreleri. Bu örnekteallowScriptAccesspolitikası seçilmiştir.AttObj- (İsteğe bağlı) Yerleştirilen nesnenin özellikleri. Bu örnekte, kimlikmyytplayerolarak ayarlandı.
Daha fazla açıklama için SWFObject belgelerine bakın.
SWFID ≡ , JavaScript API'nin kullanması için yerleştirilmiş nesnenin kimliğine bir referans depolar. Swf'ye verdiğiniz yerleşik nesnenin kimliğini kullanmanız gerekir.
SWFID ≡ "youtubewrapper"
Bu noktada projenizi başarıyla test edebilirsiniz. YouTubeLoader nesnesi, Chromeless Player'ı yüklemeli ve YouTubeLoaderEvent.LOADED etkinlik işleyicisi başarıyla çağrılmalıdır. Artık video isteği göndermeye ve YouTubeLoader nesnesi ile etkileşim kurmaya hazırız.
Oyuncuyla Etkileşim
Chromeless Player için bir ActionScript 3.0 Sarmalayıcı oluşturmaya yönelik bu yaklaşım, ActionScript'in ExternalInterface sınıfından yararlandığından, artık yüklenen oynatıcımızı kontrol etmek için YouTube JavaScript Player API içindeki İşlemlerin herhangi birini kullanabiliriz. deploy/_assets/js/ (Şekil 3) konumundaki "youTubeLoader.js" JavaScript dosyasına bakarsanız mevcut işlevlerin çoğunu içerdiğini görürsünüz. Her işlem işlevi, yürütülmeden önce SWFID değişkeninin doğru şekilde ayarlanıp ayarlanmadığını doğrulamak için önce checkObj işlevini kontrol eder.
//------------------------------------
// 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ının bir ActionScript 3.0 Flash/Flex projesinden YouTube API'si ile sorunsuz etkileşim sağlamak olduğundan, "YouTubeLoader.as" öğesine tam olarak aynı herkese açık yöntemleri ekledik. sınıf dosyası olarak ayarlayın (Şekil 2). Bu, tam olarak aynı işlemleri doğrudan Flash/Flex içindeki YouTubeLoader nesnesinde çağırabileceğiniz anlamına gelir. 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'sindeki 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 isteğinde bulunabilirsiniz. Örneğin, kullanıcı bir düğmeyi tıkladığında videoyu oynatmak istiyorsanız düğmenize MouseEvent.CLICK etkinlik 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 dışında, ilgili JavaScript işlevini doğrudan çağırarak isteğe bağlı olarak video isteğinde bulunabilirsiniz. Aşağıdaki gibi:
<a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a> Ek arama yapma
Ek çağrılar, Video İsteme ile aynı şekilde çalışır. ActionScript 3'ten, 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, oynatıcının durumu değiştiğinde bildirim almak için 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);
Ayrıca, 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 öncelikle ActionScript dosyanızın içinde YouTubePlayer sınıfının bir örneğini oluşturmalı ve kontrol etmek istediğiniz YouTubePlayer nesnesine bir referans depolamalısınız. Bunu yapmak için aşağıdakileri çağırabilirsiniz:
var _youTubeLoader:YouTubeLoader; _youTubeLoader = new YouTubeLoader();
Herkese Açık Yöntemler
player.loadVideoById(id:String, startSeconds:Number = 0):void- Videoyu belirtilen kimliğe göre 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 işaretlenmiş/yüklenmiş videoyu temizler.
player.setSize(w:Number, h:Number):void- YouTubePlayer örneğinin boyutunu ayarlar.
player.play():void- İşaretlenmiş/yüklenen geçerli videoyu oynatır.
player.pause():void- Şu anda işaretlenmiş/yüklenmiş videoyu duraklatır.
player.stop():void- İşaretlenmiş/yüklenen geçerli videoyu durdurur.
player.seekTo(seconds:Number):void- Oynatma sırasına eklenen/yüklenen videoda belirtilen zamana gider.
player.getPlayerState():String- Şu anda işaretlenmiş/yüklenmiş videonun mevcut durumunu döndürür.
player.getBytesLoaded():Number- Şu anda işaretlenmiş/yüklenmiş videonun yüklenmiş mevcut bayt sayısını döndürür.
player.getBytesTotal():Number- Şu anda seçili/yüklenmiş videonun yüklenen toplam bayt değerini döndürür.
player.getCurrentTime():Number- Şu anda işaretlenmiş/yüklenmiş videonun zaman içindeki mevcut konumunu döndürür.
player.getDuration():Number- Şu anda işaretlenmiş/yüklenmiş videonun mevcut süresini döndürür.
player.getStartBytes():Number- Şu anda işaretlenmiş/yüklenmiş videonun başlangıç baytlarını döndürür.
player.setVolume(newVolume:Number):void- Şu anda işaretlenmiş/yüklenmiş videonun ses düzeyini ayarlar.
player.getVolume():Number- Seçilmiş/yüklenmiş geçerli olarak videonun mevcut ses düzeyini döndürür.
player.mute():void- Mevcut ses düzeyini depolar ve o anda seçili/yüklenmiş videonun ses düzeyini 0 olarak değiştirir.
player.unmute():void- Şu anda işaretlenmiş/yüklenmiş videonun sesini, sessizken en son depolanan değere döndürür.
player.getEmbedCode():String- Şu anda işaretlenmiş/yüklenmiş videonun mevcut YouTube yerleştirme kodunu döndürür.
player.getVideoUrl():String- Seçilmiş/yüklenmiş geçerli olarak videonun geçerli YouTube video URL'sini döndürür.
Etkinlikler
YouTubeLoaderEvent.LOADED- Chromeless Player'ın yükleme işlemi başarıyla tamamlandıktan ve işlem çağrılarını kabul etmeye hazır hale geldiğinde tetiklenir.
YouTubeLoaderEvent.STATE_CHANGE- Oyuncunun durumu her değiştiğinde tetiklenir. YouTubeLoader sınıfı, JavaScript API numaralarını ilgili dize değerlerine çevirir, YouTubeLoaderEvent sınıfı, geçerli etkinliği
stateadlı bir değişkende depolar. Olası değerler; başlatılmadı, sona erdi, oynatılıyor, duraklatıldı, arabelleğe alınıyor, video işaretlendi. SWF ilk kez yüklendiğinde başlatılmamış bir etkinlik yayınlar. Video işaretlenip oynatılmaya hazır olduğunda video işaretleme etkinliği yayınlanır. YouTubeLoaderEvent.IO_ERROR- Oynatıcıda bir hata oluştuğunda tetiklenir. Olası iki hata kodu vardır: İstenen video bulunamadığında 100 değeri yayınlanır. Bu durum, video herhangi bir nedenle kaldırıldığında veya gizli olarak işaretlendiğinde gerçekleşir. 101, istenen video, yerleşik oynatıcılarda oynatmaya izin vermediğinde yayınlanır.
Demo Hakkında Notlar
Gösterim amacıyla, yerleştirilmiş ActionScript 3 Sarmalayıcısının altına XHTML form alanlarını, düğmeleri ve görüntüleme kullanıcı arayüzünü eklemek istedik. DRM dosyasını VE XHTML güncellemesini aynı anda almak için "youTubeLoader.js" dosyasına iki satırlık bir kod eklememiz gerekiyordu. "deploy/_assets/js/" konumunda bulunan JavaScript dosyası (Şekil 3). Bu dosyayı projenize entegre ederken aşağıdaki iki satırı [69, 79] kaldırmanız gerekir:
//------------------------------------
// 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 dahil edilen ActionScript kitaplıkları ücretsiz yazılımlardır: GNU Lesser General Public License şartlarına uygun olarak yeniden dağıtabilir ve/veya değiştirebilirsiniz. Bu dosyalar, yararlı olması umuduyla, herhangi bir garanti olmaksızın dağıtılmaktadır.
Sonuç
Bu makale, demo ve kaynak dosyaları, YouTube API'yi ve yerleşik oynatıcıları kendi projelerimiz için geliştirdiğimiz sarmalayıcı kitaplığını kullanarak ActionScript 3 ortamlarına entegre etmeye yönelik nispeten basit ve güvenilir bir çözüme ilişkin sağlam bir genel bakış sağlamalıdır. Kodun büyük bir kısmını yorumladığım için kitaplıkları keşfetmek ve yeniden amaçlamak oldukça kolay olacaktır. Bu yöntemin de sınırlamaları vardır ve her zaman iyileştirme, yeniden faktörizasyon ve geliştirme için yer vardır. Bu konudaki görüşlerinizi benimle paylaşabilirsiniz.
Yazarın Biyografisi
Matthew Richmond, 14 yıllık etkileşimli tasarım, geliştirme ve mimari deneyimine sahiptir. Stüdyo dışındayken Görsel Sanatlar Okulu'nda dijital illüstrasyon/fotoğraf teknikleri ve ileri düzey ActionScript dersleri veriyor. Matthew, choppingblock.com sitesinin kurucu ortağı ve tasarımcısıdır.