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

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


मैथ्यू रिचमंड, द चॉपिंग ब्लॉक, इंक.
अक्टूबर 2008

सुविधा के बारे में जानकारी

इस लेख में, मैं Chromeless YouTube प्लेयर के लिए एक भरोसेमंद ActionScript 3.0 रैपर प्रज़ेंट करूंगा/करूंगी. रैपर, ActionScript की बाहरी इंटरफ़ेस क्लास और YouTube के JavaScript एपीआई का इस्तेमाल करता है.

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

Fitbit 3.0 रैपर स्क्रीनशॉट
पहली इमेज: Fitbit 3.0 रैपर स्क्रीनशॉट

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

अहम जानकारी

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

खुदाई की प्रक्रिया

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

ऐक्शन क्लास की फ़ाइलें
तीसरी इमेज: JavaScript फ़ाइल
ऐक्शन क्लास की फ़ाइलें
चित्र 2: Actionscript क्लास की फ़ाइलें

Fitbit 3.0 रैपर में दो आपस में जुड़े हुए दो हिस्से होते हैं, src/choppingblock/video/ (चित्र 2), और 'youTubeLoader.js' JavaScript फ़ाइल में मौजूद परिनियोजित/_asset/js/ (चित्र 3). आपकी फ़्लैश/फ़्लेक्स स्रोत फ़ाइल YouTubeLoaderAction की क्लास का एक इंस्टेंस बनाएगी; आपका एक्सएचटीएमएल पेज फ़्लैश फ़ाइल को एम्बेड करता है और उसे YouTubeTubeLoader JavaScript फ़ाइल में फ़ंक्शन के साथ पंजीकृत करता है. यह समझना ज़रूरी है कि यहां से YouTube लोडर, फ़्लैश फ़ाइल में किया जाने वाला हर काम JavaScript के फ़ंक्शन से कंट्रोल करता है.

Flash की सभी सुविधाएं JavaScript एपीआई के ज़रिए तय होती हैं. इसलिए, आप Flash के 'टेस्ट मूवी' प्लेयर में कोई भी YouTube वीडियो लोड नहीं कर पाएंगे. यह सिर्फ़ तब काम करेगा, जब इसे एक्सएचटीएमएल पेज में एम्बेड किया गया हो और YouTubeTuber JavaScript के फ़ंक्शन से सही तरीके से जोड़ा गया हो.

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

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

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

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 कनेक्ट करना

आप तब तक YouTube से कॉन्टेंट लोड नहीं कर पाएंगे, जब तक आपकी swf फ़ाइल को किसी एक्सएचटीएमएल फ़ाइल में एम्बेड करके उसे YouTubeTubeer JavaScript से कनेक्ट नहीं कर दिया जाता. JavaScript एपीआई का इस्तेमाल करके, जो भी प्लेयर ऐक्सेस किए जाएंगे उन्हें एम्बेड करने के लिए, SWFObject का इस्तेमाल करें. इससे आपको असली उपयोगकर्ता के Flash Player वर्शन (JavaScript एपीआई को 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 का इस्तेमाल करें और फिर अपने swf का संदर्भ youTubeLoader JavaScript API को भेजें.

<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, जिसमें शामिल एचटीएमएल पेज पर फ़ंक्शन कॉल कर सके, क्योंकि Chromeलेस प्लेयर को एक्सएचटीएमएल पेज के बजाय किसी दूसरे डोमेन पर होस्ट किया गया है.

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

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

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

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

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

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

SWFID ≡ "youtubewrapper"

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

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

Chromeलेस प्लेयर के लिए, Actionscript 3.0 रैपर बनाने का यह तरीका ही काफ़ी है. इसलिए, अब हम YouTube JavaScript Player API में मौजूद किसी भी ऑपरेशंस का इस्तेमाल, लोड किए गए प्लेयर को कंट्रोल करने के लिए कर सकते हैं. अगर आप 'youTubeLoader.js' JavaScript फ़ाइल में देखें, तो डिप्लॉय/_एसेट/js/ (चित्र 3) देखें. इसमें आपको ज़्यादातर उपलब्ध फ़ंक्शन दिखेंगे. हर एक फ़ंक्शन, सबसे पहले 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 प्लेयर के लिए हमारे Actionbook 3.0 रैपर का मकसद, Fitbit 3.0 Flash/Flex प्रोजेक्ट में YouTube API के साथ आसानी से इंटरैक्ट करना है. इसके लिए, हमने src/choppingblock/video/ (इमेज 2) में मौजूद 'YouTubeLoader.as' क्लास फ़ाइल में वही सार्वजनिक तौर-तरीके चुने हैं. इसका मतलब है कि आप ठीक उसी कार्रवाई को सीधे FlashLoad/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...

सामान्य तौर पर, JavaScript एपीआई में सही फ़ंक्शन को कॉल करने के लिए, ActionScript कोड बाहरी इंटरफ़ेस क्लास का इस्तेमाल करते हैं.

वीडियो के लिए अनुरोध करना

अब आप प्लेयर की पहचान फ़ाइल का इस्तेमाल करके, 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
Chromeलेस प्लेयर के लोड हो जाने और कार्रवाई कॉल स्वीकार करने के लिए तैयार होने के बाद सक्रिय होता है.
YouTubeLoaderEvent.STATE_CHANGE
जब भी खिलाड़ी की स्थिति में बदलाव हो, तब सक्रिय होता है. YouTubeLoader क्लास, JavaScript एपीआई नंबर को उनसे जुड़ी स्ट्रिंग वैल्यू में बदल देती है. YouTubeLoaderEvent क्लास, मौजूदा इवेंट को state नाम के वैरिएबल में स्टोर करती है. संभावित वैल्यू अनस्टार्ट हैं, खत्म हो गई हैं, चल रही हैं, रुकी हुई हैं, बफ़र हो रहा है, वीडियो क्यूड हो गया है. SWF के पहली बार लोड होने पर, यह एक प्रारंभ न किए गए इवेंट को प्रसारित करेगा. जब कोई वीडियो ठीक हो जाता है और चलने के लिए तैयार होता है, तो वह वीडियो के आधार पर तैयार किया गया वीडियो ब्रॉडकास्ट करेगा.
YouTubeLoaderEvent.IO_ERROR
प्लेयर में कोई गड़बड़ी होने पर सक्रिय होता है. दो गड़बड़ी कोड हो सकते हैं: अनुरोध किया गया वीडियो न मिलने पर 100 का कोड ब्रॉडकास्ट होता है. ऐसा तब होता है, जब किसी वीडियो को हटाया गया हो (किसी वजह से). साथ ही, उसे निजी के तौर पर मार्क कर दिया गया हो. 101 का ब्रॉडकास्ट तब किया जाता है, जब अनुरोध किए गए वीडियो में एम्बेड किए गए प्लेयर में वीडियो चलाने की अनुमति नहीं होती.

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

जानकारी देने के मकसद से, हम एम्बेड किए गए Actionscript 3 रैपर के नीचे लाइटबॉक्स फ़ॉर्म, बटन, और डिसप्ले यूज़र इंटरफ़ेस (यूआई) शामिल करना चाहते थे. swf फ़ाइल और एक्सएचटीएमएल अपडेट के साथ-साथ 'परिनियोजन' इस फ़ाइल को अपने प्रोजेक्ट में जोड़ने के लिए, आपको ये दो लाइन [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)
}

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

नतीजा

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

लेखक की जानकारी


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

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