यह लेख किसी बाहरी डेवलपर ने लिखा और सबमिट किया है. YouTube API टीम, बेन लोंगोरिया को समय देने और विशेषज्ञ होने के लिए धन्यवाद देती हैं.
बेन लोंगोरिया, यूनिवर्सिटी ऑफ़ विस्कॉन्सिन - मैडिसन, अकैडमिक टेक्नोलॉजी
फ़रवरी 2009
- शुरुआती जानकारी
- द लेय ऑफ़ द लैंड
- Movie.as का इस्तेमाल करना
- MovieSprite.as का इस्तेमाल करना
- मैं क्या कॉल करूँ, मुझे क्या मिलेगा?
- निष्कर्ष
सुविधा के बारे में जानकारी
पहली इमेज: TubeLoc Chromeless प्लेयर डेमो
वाह. इस महीने के बाद, YouTube Player API एक साल का हो जाएगा. कितने साल का इंटरनेट है? इस एपीआई पर कई बेहतरीन प्रोजेक्ट बनाए गए हैं. आपको सिर्फ़ YouTube Developer API ब्लॉग को फ़ॉलो करना होगा, ताकि यह देखा जा सके कि इसका इस्तेमाल कुछ लोग ही करते हैं.
YouTube API प्लेयर के मौजूदा ऐप्लिकेशन, Fitbit 2 में लिखे गए हैं और इस्तेमाल के लिए यह अब भी एक शानदार भाषा है. हालांकि, काफ़ी लोग अब ActionScript 3 और/या Flex का इस्तेमाल कर रहे हैं. समस्या यह है कि स्ट्रीम 3 ऐप्लिकेशन के साथ कम्यूनिकेशन के लिए, Script 2 ऐप्लिकेशन पाने के लिए आपको कुछ हूप के ज़रिए देखना होगा. "लेकिन ज़रा, मुझे लगता है कि मैंने यह पहले सुना है--क्या यह पहले से ही इस बारे में कुछ नहीं है?" आप पूछ सकते हैं.
हालांकि, कई उपयोगकर्ताओं ने इसका तरीका पहले ही समझ लिया है और उन्होंने YouTube API डेवलपर फ़ोरम में अपनी जानकारी शामिल कर ली है. AS3 Chromeless रैपर और फ़्लेक्स एम्बेड किया गया प्लेयर प्रोजेक्ट भी मौजूद हैं, ताकि डेवलपर इन्हें आसानी से इस्तेमाल कर सकें.
मुझे सिर्फ़ API 3 या MXML में ही प्लेयर एपीआई की सुविधा का फिर से इस्तेमाल करने का आसान और आसान तरीका चाहिए था. इन फ़्लेक्स-एलर्जी प्रोजेक्ट के लिए, फ़्लेक्स-फ़्री क्लास और फ़्लेक्स-पसंद करने वाले प्रोजेक्ट के लिए आसानी से इस्तेमाल होने वाले फ़्लेक्स कॉम्पोनेंट. TubeLoc, दोनों ज़रूरी शर्तें पूरी करता है
TubeLoc (YouTube और LocalConnection का मैशअप) एक Actionscript 3 लाइब्रेरी है, जो YouTube Actionscript 2 Player API के लिए अडैप्टर के तौर पर काम करती है. अपने Chrome OS 3 या Flex ऐप्लिकेशन में, आसानी से YouTube वीडियो की सुविधा जोड़ी जा सकती है. इसके लिए, फ़ुल-Chrome या Chromeless प्लेयर का इस्तेमाल करें. हीटबुक 2 मीडिएशन एसवीएच के साथ बातचीत करने के लिए, TubeLoc LocalConnection क्लास का इस्तेमाल करता है. Fitbit 2 SWF आधिकारिक YouTube API प्लेयर के साथ काम करता है. हम इस टूल का इस्तेमाल कैसे करेंगे?
लेय ऑफ़ द लैंड
सबसे पहले, आपको Google Code प्रोजेक्ट से लाइब्रेरी की मौजूदा रिलीज़ को डाउनलोड करना चाहिए. रिलीज़ ज़िप संग्रह को अनपैक करने के बाद, आपको as3 निर्देशिका मिलेगी. इसके नीचे src डायरेक्ट्री है, जिसमें कुछ सैंपल क्लास शामिल हैं. बेझिझक उनका इस्तेमाल शुरू करने के लिए करें. src डायरेक्ट्री में com/enefekt/tubeloc में दो फ़ाइलें हैं. Movie.as वह है जिसे आप अपने Flex प्रोजेक्ट में इस्तेमाल कर सकते हैं और MovieSprite.as वह है जो आप अपने Fitbit 3 प्रोजेक्ट में इस्तेमाल कर सकते हैं. com/enefekt/tubeloc/event में प्लेयर से भेजी जाने वाली अलग-अलग सूचनाओं के लिए कई तरह की इवेंट कक्षाएं होती हैं.
इस ट्यूटोरियल के उदाहरणों को आज़माने से पहले, पक्का करें कि as3 डायरेक्ट्री में मौजूद src डायरेक्ट्री आपके क्लास पाथ में हो. यह प्रोसेस इस आधार पर अलग-अलग होती है कि आपको क्या डेवलप करना है, इसलिए डेवलपमेंट एनवायरमेंट के लिए दस्तावेज़ देखें.
अपना डेमो या ऐप्लिकेशन कंपाइल करने के बाद, आपको उस Actionscript 2 SWF की ज़रूरत होगी जो YouTube Player API से संपर्क करता है. आपको यह SWF रिलीज़ संग्रह में यहां मिलेगी: as3/lib/as2_tubeloc.swf. बस यह पक्का करें कि यह आपके SWF ऐप्लिकेशन को जोड़ने वाली HTML फ़ाइल के बगल में है, इस तरह से:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
ध्यान दें: आप लाइब्रेरी वाली playerWrapperUrl प्रॉपर्टी का इस्तेमाल करके, इस SWF का पाथ बदल सकते हैं.
Movies.as का इस्तेमाल करना
आइए देखते हैं कि TubeLoc के Flex वर्शन को कैसे इस्तेमाल किया जाए. हम सबसे पहले फ़ुल-Chrome प्लेयर (सभी कंट्रोल के साथ) और फिर BYOC chromeless प्लेयर को देखेंगे. आप MXML में फ़ुल-Chrome प्लेयर का इस्तेमाल इस तरह करते हैं:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
मुझे पता है, ठीक है, ठीक है? बिल्कुल नहीं! तो चलो, पागल हो जाएं और Chromeless करें:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" chromeless="true" />
हम आपको दर्द में एक और विशेषता जोड़ रहे हैं. बस इतना ही. यहां बताया गया है कि पूरी MXML फ़ाइल कैसी दिखेगी:
<?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>
ध्यान दें: mx:Application एलिमेंट में, हम फ़िल्म के कॉम्पोनेंट के पैकेज के साथ tubeloc नेमस्पेस जोड़ते हैं. ऐसा करने के बाद, दिखाए गए कॉम्पोनेंट का इस्तेमाल किया जा सकता है. बाद में, हम देखेंगे कि इस कॉम्पोनेंट पर क्या सेट और कॉल किया जा सकता है.
MoviesSprite.as का इस्तेमाल करना
आइए, अब देखते हैं कि TubeLoc के Actionscript 3 वर्शन को कैसे इस्तेमाल करें. इस वर्शन के लिए Flex फ़्रेमवर्क से कोई क्लास लेने की ज़रूरत नहीं है और यह सिर्फ़ Flash Player नेटिव क्लास का इस्तेमाल करता है. हम आपको सबसे पहले फ़ुल-Chrome प्लेयर और फिर Chromeलेस प्लेयर इस्तेमाल करने का तरीका बताएंगे. यहां एक पूरा उदाहरण देखें:
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;
}
}
}
सबसे पहले, हम ज़रूरी TubeLoc क्लास इंपोर्ट करते हैं. इसके बाद, कंस्ट्रक्टर में, हम MovieSprite क्लास का एक इंस्टेंस बनाते हैं और अपना वीडियो आईडी, GameSprite के कंस्ट्रक्टर को पास करते हैं. इसके बाद, हम PlayerReadyEvent के लिए इवेंट लिसनर जोड़ते हैं. onPlayerReady इवेंट हैंडलर में, हम फ़िल्म का साइज़ सेट करते हैं. ध्यान दें: हम फ़ुल-Chrome प्लेयर का इस्तेमाल कर रहे हैं. इसलिए, हम MovieSprite क्लास पर एक स्टैटिक प्रॉपर्टी का फ़ायदा उठा रहे हैं. इससे, हम Chrome की ऊंचाई को ध्यान में रखते हुए, मूवी का साइज़ बदल पाते हैं.
ठीक है, तो chromeless प्लेयर के बारे में क्या विचार है?
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");
}
}
}
इसमें क्या अंतर है? कंस्ट्रक्टर में, हम वीडियो आईडी के लिए null पास करते हैं और दूसरा true पैरामीटर MovieSprite क्लास को बताता है कि हम Chromeलेस जा रहे हैं. आपको onPlayerReady इवेंट हैंडलर में भी अंतर दिखेगा. यहां हम loadVideoById तरीके का इस्तेमाल करके, आईडी के हिसाब से अपना वीडियो लोड करते हैं.
मुझे क्या कॉल करना चाहिए, मुझे क्या मिलेगा?
कॉल में क्या उपलब्ध है और हमें किन इवेंट पर काम करना है? आपने ऐप्लिकेशन की जो रिलीज़ डाउनलोड की है उसमें पूरी जानकारी देने के लिए, कोड के पूरे दस्तावेज़ दिए गए हैं. फटाफट जानकारी के तौर पर, Movies.as और movieSprite.as, दोनों के लिए आपके पास ये तरीके हैं:
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
इन तरीकों के अलावा, Movies.as कॉम्पोनेंट में आपके पास इन प्रॉपर्टी का ऐक्सेस होता है:
playerReady:Boolean chromeless:Boolean videoId:String stateDescription:String currentTime:Number duration:Number videoUrl:String videoEmbedCode:String volume:Number
इन इवेंट की सदस्यता ली जा सकती है. आपको दस्तावेज़ में ज़्यादा जानकारी मिलेगी.
onError onStateChange onMovieStateUpdate onMovieProgress onPlayerReady onPlayerUnload
नतीजा
हमें उम्मीद है कि इस लेख से आपको अपने Flash ऐप्लिकेशन में YouTube की सुविधाओं और कॉन्टेंट को इंटिग्रेट करने में मदद मिली होगी. आप TubeLoc के साथ आगे बढ़ रहे हैं, इसे ध्यान में रखने की एक सीमा है: आप एक ही समय में स्टेज पर दो YouTube प्लेयर नहीं रख सकते.
उम्मीद है कि इस समस्या को समय रहते ठीक कर लिया जाएगा. इसलिए, जब आपको कोई ऐसी गड़बड़ी मिले या कोई सुविधा न मिले, तो Google Code प्रोजेक्ट पर जाएं और समस्या को ट्रैक करने वाले टूल में उसकी शिकायत करें. पढ़ने के लिए धन्यवाद!
लेखक की जानकारी
बेन लॉन्गोरिया यूनिवर्सिटी ऑफ़ विस्कॉन्सिन-मेडिसन के एक शैक्षणिक ऐप्लिकेशन डेवलपर हैं. वे Flash 5 के बाद से Flash और Flex 2 के रिलीज़ होने के बाद से Flex का इस्तेमाल कर रहे हैं. पिछले दो सालों से, वे Mozilla के ऐप्लिकेशन भी डेवलप कर रहे हैं. बेन ने शिक्षा और शिक्षा से जुड़े कई प्रोजेक्ट पर काम किया है. इसमें ब्राउज़र और डेस्कटॉप, दोनों को टारगेट करने वाले क्रॉस-प्लैटफ़ॉर्म ऐप्लिकेशन शामिल हैं. वे इंटरफ़ेस और इंटरैक्शन डिज़ाइन में अहम भूमिका निभाते हैं. उन्हें इस्तेमाल करने लायक सॉफ़्टवेयर बनाने में आने वाली चुनौतियों का सामना करना पड़ता है. आप उनका ब्लॉग http://enefekt.com/sansBrowser/ पर जाकर, InsideRIA में उनका योगदान पढ़ सकते हैं.
इस काम का लाइसेंस क्रिएटिव कॉमंस एट्रिब्यूशन 3.0 अमेरिका के लाइसेंस के तहत मिला है.