Chromeless प्लेयर के लिए ActionScript 3.0 रैपर

इस लेख को किसी बाहरी डेवलपर ने लिखा और सबमिट किया है. YouTube API और टूल टीम, मैथ्यू रिचमंड को अपना समय देने और अपनी विशेषज्ञता के लिए धन्यवाद देती है.


अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है मैथ्यू रिचमंड, द चॉपिंग ब्लॉक, इनकॉर्पोरेटेड
अक्टूबर 2008

परिचय

इस लेख में, मैं Chromeless YouTube Player के लिए भरोसेमंद ActionScript 3.0 Wrapper के बारे में बताऊंगा. यह रैपर, ActionScript की ExternalInterface क्लास और YouTube के JavaScript API का फ़ायदा लेता है.

Google के YouTube प्लेयर टूल और Chromeless प्लेयर ने डिज़ाइनर/डेवलपर को सशक्त बनाया है, ताकि वे अपने ऑनलाइन प्रोजेक्ट में YouTube की क्षमता को तेज़ी और आसानी से इंटिग्रेट कर सकें. यह तरीका, ऐसे तय बजट वाले छोटे प्रोजेक्ट के लिए बिलकुल सही है जिनमें वीडियो होस्ट करने की अनुमति नहीं है. साथ ही, बड़े प्रोजेक्ट के लिए यह तरीका अपनाया जा सकता है. यह तरीका ऐसे क्लाइंट के लिए सही है जो अपनी YouYube ऑडियंस से अलग किए बिना, असली उपयोगकर्ताओं को उनकी पसंद के मुताबिक अनुभव देना चाहते हैं.

ActionScript 3.0 रैपर का स्क्रीनशॉट अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
इमेज 1: ActionScript 3.0 रैपर स्क्रीनशॉट

YouTube के Flash API और एम्बेड किए गए प्लेयर इसमें लिखे गए हैं, और ActionScript 2.0 के साथ काफ़ी अच्छी तरह से काम करते हैं; हालांकि, अगर आपका प्रोजेक्ट ActionScript 3.0 है, तो आसान इंटिग्रेशन और ज़्यादा जटिल हो जाता है. एक ActionScript 3.0 swf फ़ाइल में टाइप करना आसान है, लेकिन इस ऐप से न तो सीधे तौर पर बातचीत की जा सकती है और न ही इसे लोड किए गए प्लेयर में पास किया जा सकता है. यह और भी मुश्किल हो जाता है, क्योंकि YourTube के सर्वर से आने वाली SWF फ़ाइल, अपने अंदर एक वीडियो लोड कर रही है. हमारे रैपर को इस तथ्य के बारे में पूरी जानकारी होनी चाहिए और उसके हिसाब से उस पर प्रतिक्रिया देनी चाहिए. अच्छी बात यह है कि ActionScript भाषा में नेस्ट किए गए इन डिस्कनेक्ट किए गए इन टुकड़ों को फिर से कनेक्ट करने के लिए दो उचित समाधान दिए गए हैं, LocalConnection क्लास या ExternalInterface क्लास. इस डेमो में, दूसरे विकल्प पर फ़ोकस किया जाएगा, क्योंकि ExternalInterface, अच्छी तरह से दस्तावेज़ किए गए JavaScript API के साथ आसानी से काम करता है. इसलिए, यह XHTML पेज में मौजूद किसी भी चीज़ के साथ अच्छी तरह से काम करता है.

ज़रूरी संसाधन

शुरू करने से पहले, यहां इस विषय से जुड़े संसाधनों और फ़ाइलों की सूची दी गई है. इस लेख में जिन विषयों पर चर्चा की गई है उनके बारे में ज़्यादा जानकारी, नीचे दिए गए लिंक में मिलेगी.

खुदाई करना

रैपर डेमो की खास जानकारी

ActionScript क्लास फ़ाइलें
तीसरी इमेज: JavaScript फ़ाइल
ActionScript क्लास फ़ाइलें अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
इमेज 2: ActionScript क्लास फ़ाइलें

ActionScript 3.0 Wrapper में दो मुख्य हिस्से होते हैं, जो एक-दूसरे से जुड़े होते हैं. पहला हिस्सा, src/choppingblock/video/ (इमेज 2) में मौजूद ActionScript 3.0 क्लास फ़ाइलें और दूसरा हिस्सा, deploy/_assets/js/ (इमेज 3) में मौजूद 'youTubeLoader.js' JavaScript फ़ाइल. आपकी Flash/Flex सोर्स फ़ाइल, YouTubeLoader ActionScript क्लास का एक इंस्टेंस बनाएगी; आपका XHTML पेज, फ़्लैश फ़ाइल को एम्बेड करता है और उसे youTubeLoader JavaScript फ़ाइल के फ़ंक्शन के साथ रजिस्टर करता है. यहां से यह समझना ज़रूरी है कि YouTubeLoader, फ़्लैश फ़ाइल में जो कुछ भी करता है उसे JavaScript फ़ंक्शन से कंट्रोल किया जाता है.

Flash में मौजूद सभी फ़ंक्शन, JavaScript API से कंट्रोल किए जाते हैं. इसलिए, Flash के 'टेस्ट मूवी' प्लेयर में YouTube का कोई भी कॉन्टेंट लोड नहीं किया जा सकेगा. यह सिर्फ़ एक्सएचटीएमएल पेज में एम्बेड होने पर ही काम करेगा. साथ ही, यह youTubeLoader JavaScript फ़ंक्शन के साथ सही तरीके से कनेक्ट होने पर काम करेगा.

ध्यान दें: इनमें से किसी भी कॉल की जांच करने के लिए, आपकी फ़ाइल किसी वेब सर्वर पर चलनी चाहिए या Flash Player की सुरक्षा सेटिंग में बदलाव करना होगा. ऐसा इसलिए, क्योंकि Flash Player, लोकल फ़ाइलों और इंटरनेट के बीच कॉल पर पाबंदी लगाता है.

YouTubeLoader ऑब्जेक्ट बनाना

अपने Flash/Flex प्रोजेक्ट में YouTubeLoader ऑब्जेक्ट का इंस्टेंस बनाने से पहले, आपको यह पक्का करना होगा कि ज़रूरी फ़ाइलों का पैकेज (फ़ोल्डर), आपके प्रोजेक्ट की डायरेक्ट्री में हो (दूसरा चित्र देखें) या आपके प्रोजेक्ट के क्लासपाथ में शामिल हो. इसके बाद आप पैकेज फ़ाइलें इंपोर्ट कर सकते हैं:

import choppingblock.video.*;

इससे आपकी ActionScript फ़ाइल को 'YouTubeLoader.as' का ऐक्सेस मिल जाता है और 'YouTubeLoaderEvent.as' क्लास. अब आपको YouTubeLoader क्लास और ज़रूरी इवेंट लिसनर का इंस्टेंस बनाने के बारे में जानकारी है:

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 फ़ाइल मौजूद है और सही तरह से कनेक्ट की गई है, तो youTubePlayerLoadedHandler को सही तरीके से कॉल किया जाना चाहिए और हम अनुरोध करने के लिए तैयार हैं.

SWF को एम्बेड करना और youTubeLoader JavaScript को कनेक्ट करना

जब तक आपकी swf फ़ाइल, एक्सएचटीएमएल फ़ाइल में एम्बेड नहीं की जाती और youTubeLoader JavaScript से कनेक्ट नहीं किया जाता, तब तक YouTube से कॉन्टेंट लोड नहीं किया जा सकेगा. हमारा सुझाव है कि JavaScript API का इस्तेमाल करके ऐक्सेस किए जाने वाले प्लेयर को एम्बेड करने के लिए, SWFObject का इस्तेमाल करें. इससे, आपको असली उपयोगकर्ता के Flash Player के वर्शन का पता चलेगा. JavaScript API के लिए, Flash Player 8 या उसके बाद के वर्शन की ज़रूरत होती है. साथ ही, प्लेयर को देखने के लिए Internet Explorer का इस्तेमाल करते समय, 'इस कंट्रोल को चालू करने के लिए क्लिक करें' बॉक्स भी हट जाएगा.

आप अपनी एक्सएचटीएमएल फ़ाइल के <head> हिस्से में, swfobject और YouTubeLoader फ़ाइल को आपस में जोड़ते हैं:

<script type="text/javascript" src="_assets/js/swfobject.js"></script>
<script type="text/javascript" src="_assets/js/youTubeLoader.js"></script>

JavaScript API की सुविधा चालू करके, ActionScript 3.0 swf को एम्बेड करने के लिए, SWFObject का इस्तेमाल करने का उदाहरण यहां देखें. इसके बाद, youTubeLoader JavaScript API को अपने swf का रेफ़रंस दें.

<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>

कोड में allowScriptAccess पैरामीटर की ज़रूरत होती है, ताकि प्लेयर SWF, उसमें मौजूद एचटीएमएल पेज पर फ़ंक्शन को कॉल कर सके. इसकी वजह यह है कि Chromeless Player, XHTML पेज से अलग डोमेन पर होस्ट किया जाता है.

हम सिर्फ़ एम्बेड ऑब्जेक्ट का आईडी दे रहे हैं, वह है एम्बेड ऑब्जेक्ट का आईडी — इस मामले में, youtubewrapper. इस आईडी का इस्तेमाल, youTubeLoader.js फ़ाइल getElementById() का इस्तेमाल करके प्लेयर का रेफ़रंस पाने के लिए करेगी.

swfobject.embedSWF, YouTube से प्लेयर लोड करेगा और उसे आपके पेज पर एम्बेड करेगा.

swfobject.embedSWF(swfUrlStr, replaceElemIdStr, widthStr, heightStr, swfVersionStr, xiSwfUrlStr, flashvarsObj, parObj, attObj)

  • swfUrlStr - यह SWF का यूआरएल है. ध्यान दें कि हमने JavaScript API कॉल को चालू करने के लिए, सामान्य YouTube SWF यूआरएल में enablejsapi और playerapiid पैरामीटर जोड़े हैं.
  • replaceElemIdStr - यह एचटीएमएल DIV आईडी है, जिसे एम्बेड किए गए कॉन्टेंट से बदलना है. ऊपर दिए गए उदाहरण में, यह ytapiplayer है.
  • widthStr - प्लेयर की चौड़ाई.
  • heightStr - प्लेयर की ऊंचाई.
  • swfVersionStr - उपयोगकर्ता को कॉन्टेंट देखने के लिए ज़रूरी कम से कम वर्शन. इस मामले में, वर्शन 8 या इससे ऊपर के वर्शन की ज़रूरत है. अगर उपयोगकर्ता के पास 8 या उससे ज़्यादा वर्शन नहीं है, तो उसे एचटीएमएल DIV में टेक्स्ट की डिफ़ॉल्ट लाइन दिखेगी.
  • xiSwfUrlStr - (ज़रूरी नहीं) आपके एक्सप्रेस इंस्टॉल SWF का यूआरएल बताता है. इस उदाहरण में इस्तेमाल नहीं किया गया.
  • flashVarsObj - (ज़रूरी नहीं) नाम:वैल्यू पेयर में आपके FlashVars की जानकारी देता है. इस उदाहरण में इस्तेमाल नहीं किया गया.
  • parObj - (ज़रूरी नहीं) एम्बेड किए गए ऑब्जेक्ट के पैरामीटर. इस मामले में, हमने allowScriptAccess सेट किया है.
  • AttObj - (ज़रूरी नहीं) एम्बेड किए गए ऑब्जेक्ट के लिए एट्रिब्यूट. इस मामले में, हमने आईडी को myytplayer पर सेट कर दिया है.

ज़्यादा जानकारी के लिए, SWFObject दस्तावेज़ देखें.

SWFID ≡ , एम्बेड किए गए ऑब्जेक्ट के आईडी का रेफ़रंस सेव करेगा, ताकि JavaScript API का इस्तेमाल किया जा सके. आपको उसी एम्बेड ऑब्जेक्ट का आईडी इस्तेमाल करना होगा जो आपने SWF फ़ाइल को दिया था.

SWFID ≡ "youtubewrapper"

इसके बाद, आपके पास अपने प्रोजेक्ट की जांच करने का विकल्प होगा. YouTubeLoader ऑब्जेक्ट, Chromeless Player को लोड करेगा और YouTubeLoaderEvent.LOADED इवेंट हैंडलर को सफलतापूर्वक कॉल किया जाएगा. अब हम वीडियो का अनुरोध करने और YouTubeLoader ऑब्जेक्ट के साथ इंटरैक्ट करने के लिए तैयार हैं.

प्लेयर के साथ इंटरैक्ट करना

Chromeless प्लेयर के लिए ActionScript 3.0 Wrapper बनाने की यह सोच, ActionScript की ExternalInterface क्लास का उपयोग कर सकती है, इसलिए हम अपने लोड किए गए प्लेयर को नियंत्रित करने के लिए YouTube JavaScript Player API में किसी भी ऑपरेशन का उपयोग कर सकते हैं. deploy/_assets/js/ (तीसरा इमेज) में मौजूद 'youTubeLoader.js' JavaScript फ़ाइल में, आपको ज़्यादातर फ़ंक्शन मिलेंगे. हर ऑपरेशन फ़ंक्शन, पहले checkObj फ़ंक्शन की जांच करता है, ताकि यह पुष्टि की जा सके कि SWFID वैरिएबल को लागू करने से पहले, उसे सही तरीके से सेट किया गया है या नहीं.

//------------------------------------
// 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 के लिए बनाए गए ActionScript 3.0 Wrapper का मकसद, ActionScript 3.0 Flash/Flex प्रोजेक्ट में YouTube API के साथ आसानी से इंटरैक्ट करना है. इसलिए, हमने src/choppingblock/video/ (Figure 2) में मौजूद 'YouTubeLoader.as' क्लास फ़ाइल में, पब्लिक तरीके जोड़े हैं. इसका मतलब है कि इसी तरह की कार्रवाइयों को सीधे Flash/Flex में YouTubeLoader ऑब्जेक्ट पर कॉल किया जा सकता है. क्लास फ़ाइल में जाकर, आपको ये चीज़ें दिखेंगी:

// ------------------------------------
// 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 के तरीके, JavaScript API में सही फ़ंक्शन को कॉल करने के लिए, ExternalInterface क्लास का इस्तेमाल करते हैं.

किसी वीडियो का अनुरोध करना

अब प्लेयर रेफ़रंस का इस्तेमाल करके फ़ंक्शन कॉल करके, अपनी ActionScript 3.0 फ़ाइल में वीडियो का अनुरोध किया जा सकता है. उदाहरण के लिए, अगर आपको उपयोगकर्ता के किसी बटन पर क्लिक करने पर वीडियो चलाना है, तो आपको अपने बटन में MouseEvent.CLICK इवेंट लिसनर जोड़ना होगा. इस तरह:

// assuming your button was called 'myButton'
myButton.addEventListener(MouseEvent.CLICK, youtubeLoadVideoHandler);

साथ ही, अनुरोध को मैनेज करने के लिए इवेंट हैंडलर तरीका बनाएं. इस तरह:

private function youtubeLoadVideoHandler (event:MouseEvent):void{
  
  // assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
  _youTubeLoader.loadVideoById( "u1zgFlCw8Aw" );
};

अपनी फ़्लैश/फ़्लेक्स फ़ाइल के अलावा, सीधे उससे जुड़े JavaScript फ़ंक्शन को कॉल करके, किसी वीडियो का अनुरोध किया जा सकता है. हालांकि, ऐसा करना ज़रूरी नहीं है. इस तरह:

 <a href="javascript:loadVideoById('u1zgFlCw8Aw')">Play</a>

अतिरिक्त कॉल जारी करना

अन्य कॉल, वीडियो का अनुरोध करने की तरह ही काम करते हैं. ActionScript 3 में, प्लेयर रेफ़रंस का इस्तेमाल करके आसानी से तरीकों को कॉल किया जा सकता है. उपलब्ध तरीकों की पूरी सूची यहां दी गई है.

इवेंट की सदस्यता लेना

प्लेयर रेफ़रंस में इवेंट लिसनर जोड़कर, इवेंट की सदस्यता लें. उदाहरण के लिए, खिलाड़ी की स्थिति बदलने पर सूचना पाने के लिए, YouTubeLoaderEvent.STATE_CHANGE के लिए इवेंट लिसनर जोड़ें. इस तरह:

// assuming that '_youTubeLoader' is a reference to your YouTubeLoader object
_youTubeLoader.addEventListener(YouTubeLoaderEvent.STATE_CHANGE, youTubePlayerStateChangeHandler);

साथ ही, अनुरोध को मैनेज करने के लिए इवेंट हैंडलर तरीका बनाएं. इस तरह:


private function youTubePlayerStateChangeHandler (event:YouTubeLoaderEvent):void{
  //trace("YouTubeIntegrationDemo: youTubePlayerStateChangeHandler");
  
  _stateField.text = event.state;
};

उपलब्ध कार्रवाइयां

YouTubePlayer API के तरीकों को कॉल करने के लिए, आपको सबसे पहले अपनी ActionScript फ़ाइल में YouTubePlayer क्लास का एक इंस्टेंस बनाना होगा. साथ ही, आपको उस YouTubePlayer ऑब्जेक्ट का रेफ़रंस सेव करना होगा जिसे आपको कंट्रोल करना है. ऐसा करने के लिए, इन नंबरों पर कॉल करें:

var _youTubeLoader:YouTubeLoader;
_youTubeLoader = new YouTubeLoader();

सार्वजनिक तरीके

player.loadVideoById(id:String, startSeconds:Number = 0):void
खास आईडी के आधार पर वीडियो लोड करता है और चलाता है.
player.cueNewVideo(id:String, startSeconds:Number = 0):void
लोड होता है, लेकिन बताए गए आईडी के हिसाब से वीडियो अपने-आप नहीं चलता.
player.clearVideo():void
मौजूदा क्यू/लोड किए गए वीडियो हटा देता है.
player.setSize(w:Number, h:Number):void
YouTubePlayer के इंस्टेंस का साइज़ सेट करता है.
player.play():void
इससे, क्य्यू में जोड़ा गया या लोड किया गया वीडियो चलता है.
player.pause():void
इससे, फ़िलहाल क्य्यू में जोड़े गए/लोड किए गए वीडियो को रोका जाता है.
player.stop():void
इससे, क्य्यू में जोड़े गए या लोड किए गए वीडियो को रोका जा सकता है.
player.seekTo(seconds:Number):void
इस समय क्यू किए गए या लोड किए गए वीडियो में, तय समय पर ले जाया गया है.
player.getPlayerState():String
यह दिखाता है कि क्यू/लोड किए गए मौजूदा वीडियो की मौजूदा स्थिति क्या है.
player.getBytesLoaded():Number
यह फ़ंक्शन, चुने गए या लोड किए गए मौजूदा वीडियो के लोड किए गए मौजूदा बाइट की वैल्यू दिखाता है.
player.getBytesTotal():Number
इस फ़ंक्शन से, फ़िलहाल क्य्यू में रखे गए/लोड किए गए वीडियो के लोड किए गए कुल बाइट की वैल्यू मिलती है.
player.getCurrentTime():Number
यह जानकारी दिखाता है कि चुने गए मौजूदा/लोड किए गए वीडियो के समय की मौजूदा स्थिति क्या है.
player.getDuration():Number
इस फ़ंक्शन से, क्य्यू में मौजूद/लोड किए गए वीडियो की मौजूदा अवधि का पता चलता है.
player.getStartBytes():Number
इस फ़ंक्शन से, फ़िलहाल क्य्यू में रखे गए/लोड किए गए वीडियो की शुरुआती बाइट की जानकारी मिलती है.
player.setVolume(newVolume:Number):void
इससे, क्य्यू में मौजूद/लोड किए गए वीडियो का वॉल्यूम सेट होता है.
player.getVolume():Number
इस फ़ंक्शन से, क्य्यू में मौजूद/लोड किए गए वीडियो का मौजूदा वॉल्यूम पता चलता है.
player.mute():void
मौजूदा वॉल्यूम को सेव करता है और क्य्यू में मौजूद/लोड किए गए वीडियो के वॉल्यूम को 0 पर सेट करता है.
player.unmute():void
म्यूट किए जाने पर, क्यू/लोड किए गए मौजूदा वीडियो की संख्या को, सेव की गई आखिरी वैल्यू पर सेट करता है.
player.getEmbedCode():String
यह दिखाए गए मौजूदा/लोड किए गए वीडियो का मौजूदा YouTube एम्बेड कोड दिखाता है.
player.getVideoUrl():String
मौजूदा क्यू/लोड किए गए वीडियो का मौजूदा YouTube वीडियो यूआरएल दिखाता है.

इवेंट

YouTubeLoaderEvent.LOADED
Chromeless प्लेयर के लोड हो जाने और ऑपरेशन कॉल स्वीकार करने के लिए तैयार होने पर सक्रिय किया जा सकता है.
YouTubeLoaderEvent.STATE_CHANGE
जब भी प्लेयर की स्थिति बदलती है, तब यह ट्रिगर होता है. YouTubeLoader क्लास, JavaScript एपीआई नंबर को उनसे जुड़ी स्ट्रिंग वैल्यू में अनुवाद करती है. YouTubeLoaderEvent क्लास, मौजूदा इवेंट को state वैरिएबल में सेव करती है. इस एट्रिब्यूट की संभावित वैल्यू ये हैं: शुरू नहीं हुआ, खत्म हो गया, चल रहा है, रोका गया, बफ़र हो रहा है, वीडियो को क्यू में डाला गया. SWF के पहली बार लोड होने पर, यह किसी शुरू न किए गए इवेंट को प्रसारित करेगा. जब वीडियो को क्यू में डाल दिया जाएगा और वह चलने के लिए तैयार हो जाएगा, तब यह वीडियो क्यू में डाले जाने का इवेंट ब्रॉडकास्ट करेगा.
YouTubeLoaderEvent.IO_ERROR
प्लेयर में कोई गड़बड़ी आने पर सक्रिय होता है. गड़बड़ी के दो कोड हो सकते हैं: अनुरोध किया गया वीडियो नहीं मिलने पर, मैसेज को 100 पर ब्रॉडकास्ट किया जाता है. ऐसा तब होता है, जब किसी वीडियो को किसी भी वजह से हटा दिया गया हो या उसे निजी के तौर पर मार्क कर दिया गया हो. 101 तब प्रसारित होता है जब अनुरोध किया गया वीडियो एम्बेड किए गए प्लेयर में प्लेबैक की अनुमति न देता हो.

डेमो के लिए नोट

प्रदर्शन के उद्देश्य से हम एक्सएचटीएमएल फ़ॉर्म फ़ील्ड, बटन और एम्बेड किए गए Action 3 Wrapper के नीचे डिसप्ले यूज़र इंटरफ़ेस (यूआई) दिखाना चाहते थे. एक ही समय पर SWF फ़ाइल और XHTML अपडेट करने के लिए, हमें 'deploy/_assets/js/' में मौजूद 'youTubeLoader.js' JavaScript फ़ाइल में दो लाइन कोड शामिल करने पड़े (तीसरा इमेज). इस फ़ाइल को अपने प्रोजेक्ट में इंटिग्रेट करते समय, आपको इन दो लाइनों [69, 79] को हटाना होगा:

//------------------------------------
// 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)
}

डेमो फ़ाइल और शामिल की गई ActionScript लाइब्रेरी मुफ़्त सॉफ़्टवेयर हैं: आप इसे फिर से वितरित कर सकते हैं और/या GNU के कम सामान्य पब्लिक लाइसेंस की शर्तों के तहत इसमें बदलाव कर सकते हैं. इन फ़ाइलों को इस उम्मीद से उपलब्ध कराया जाता है कि ये आपके लिए काम की होंगी. हालांकि, इन पर कोई वारंटी नहीं दी जाती.

नतीजा

इस लेख, डेमो, और सोर्स फ़ाइलों से आपको YouTube API और एम्बेड किए गए प्लेयर को ActionScript 3 एनवायरमेंट में इंटिग्रेट करने के लिए, एक आसान और भरोसेमंद समाधान के बारे में पूरी जानकारी मिल सकती है. इसके लिए, हमने अपने प्रोजेक्ट के लिए एक रैपर लाइब्रेरी बनाई है. मैंने ज़्यादातर कोड पर टिप्पणी की है. इसलिए, लाइब्रेरी को एक्सप्लोर करना और उनका फिर से इस्तेमाल करना काफ़ी आसान होगा. इसमें कुछ सीमाएं हैं. हालांकि, इसमें सुधार करने, फिर से फ़ैक्टर करने, और बेहतर बनाने की हमेशा जगह होती है. अगर इस बारे में आपके कुछ विचार हैं, तो मुझसे बेझिझक संपर्क करें.

लेखक के बारे में जानकारी


मैथ्यू रिचमंड

मैथ्यू रिचमंड को 14 साल से इंटरैक्टिव डिज़ाइन, डेवलपमेंट, और आर्किटेक्चर का अनुभव है. जब वे स्टूडियो में नहीं होते, तब वे स्कूल ऑफ़ विज़ुअल आर्ट्स में डिजिटल इलस्ट्रेशन/फ़ोटोग्राफ़ी की तकनीकें और ऐडवांस ऐक्शनस्क्रिप्ट सिखाते हैं. मैथ्यू, choppingblock.com के फ़ाउंडिंग पार्टनर और डिज़ाइनर हैं.