इस लेख को किसी बाहरी डेवलपर ने लिखा और सबमिट किया है. YouTube API की टीम, बेन लॉन्गोरिया को अपना समय देने और अपनी विशेषज्ञता देने के लिए धन्यवाद देती है.
बेन लॉन्गरिया, यूनिवर्सिटी ऑफ़ विस्कॉन्सिन - मैडिसन, अकेडमिक टेक्नोलॉजी
फ़रवरी 2009
- शुरुआती जानकारी
- The Lay of the Land
- Movie.as का इस्तेमाल करना
- MovieSprite.as का इस्तेमाल करना
- किस तरह के कॉल किए जा सकते हैं और मुझे क्या मिलेगा?
- निष्कर्ष
परिचय
पहली इमेज: TubeLoc के Chromeless प्लेयर का डेमो
वाह। इस लेख को लिखने के समय से, YouTube Player API को लॉन्च हुए एक साल हो जाएगा. इंटरनेट के हिसाब से यह कितने सालों के बराबर है? एपीआई पर कई बेहतरीन प्रोजेक्ट बनाए गए हैं. YouTube Developer API ब्लॉग को फ़ॉलो करके, यह देखा जा सकता है कि इस एपीआई का इस्तेमाल करके कई लोगों ने बेहतरीन काम किए हैं.
YouTube API प्लेयर ऐप्लिकेशन का मौजूदा सेट, ActionScript 2 में लिखा गया है. हालांकि, यह अब भी इस्तेमाल करने के लिए एक बेहतरीन भाषा है, लेकिन ज़्यादातर लोग अब ActionScript 3 और/या Flex का इस्तेमाल कर रहे हैं. समस्या यह है कि ActionScript 2 ऐप्लिकेशन को ActionScript 3 ऐप्लिकेशन के साथ काम करने के लिए, आपको कुछ कदम उठाने होंगे. आपके मन में यह सवाल आ सकता है, "लेकिन रुकिए...मुझे लगता है कि मैंने यह पहले सुना है--क्या इसके लिए पहले से कुछ नहीं है?"
कई लोगों ने पहले ही यह तरीका जान लिया है और YouTube API डेवलपर फ़ोरम में इस बारे में जानकारी शेयर की है. डेवलपर के लिए इसे आसान बनाने के लिए, AS3 Chromeless Wrapper और Flex एम्बेडेड प्लेयर प्रोजेक्ट भी बनाए गए हैं.
मुझे Player API की सुविधा को सिर्फ़ ActionScript 3 या MXML में फिर से इस्तेमाल करने का आसान तरीका चाहिए था. Flex का इस्तेमाल न करने वाले प्रोजेक्ट के लिए, Flex-फ़्री क्लास और Flex का इस्तेमाल करने वाले प्रोजेक्ट के लिए, आसानी से इस्तेमाल किया जा सकने वाला Flex कॉम्पोनेंट. TubeLoc ने दोनों ज़रूरी शर्तें पूरी की हैं
TubeLoc (YouTube और LocalConnection का मशअप), ActionScript 3 लाइब्रेरी है. यह YouTube ActionScript 2 Player API के लिए अडैप्टर के तौर पर काम करती है. अपने ActionScript 3 या Flex ऐप्लिकेशन में, YouTube वीडियो की सुविधा आसानी से जोड़ी जा सकती है. इसके लिए, फ़ुल-क्रोम या क्रोमलेस YouTube प्लेयर में से किसी एक का इस्तेमाल किया जा सकता है. TubeLoc, ActionScript 2 मीडिएटर SWF के साथ कम्यूनिकेट करने के लिए, LocalConnection क्लास का इस्तेमाल करता है. ActionScript 2 SWF, YouTube API के आधिकारिक प्लेयर के साथ काम करता है. तो इसका इस्तेमाल कैसे किया जाता है?
The Lay of the Land
सबसे पहले, आपको Google Code प्रोजेक्ट से लाइब्रेरी की मौजूदा रिलीज़ डाउनलोड करनी होगी. रिलीज़ के ZIP फ़ॉर्मैट वाले संग्रह को अनपैक करने के बाद, आपको एक as3 डायरेक्ट्री दिखेगी. इसके नीचे src डायरेक्ट्री है, जिसमें कुछ सैंपल क्लास शामिल हैं. शुरुआत करने के लिए, इनका इस्तेमाल करें. src डायरेक्ट्री में com/enefekt/tubeloc में दो फ़ाइलें हैं. Movie.as का इस्तेमाल, Flex प्रोजेक्ट में किया जा सकता है. वहीं, MovieSprite.as का इस्तेमाल, ActionScript 3 प्रोजेक्ट में किया जा सकता है. com/enefekt/tubeloc/event में, प्लेयर से भेजी जा सकने वाली अलग-अलग सूचनाओं के लिए अलग-अलग इवेंट क्लास होती हैं.
इस ट्यूटोरियल में दिए गए उदाहरण आज़माने से पहले, पक्का करें कि as3 डायरेक्ट्री में मौजूद src डायरेक्ट्री आपके क्लास पाथ में हो. डेवलपमेंट के लिए इस्तेमाल किए जाने वाले टूल के हिसाब से, यह प्रोसेस अलग-अलग होती है. इसलिए, अपने डेवलपमेंट एनवायरमेंट के लिए दस्तावेज़ देखें.
डेमो या ऐप्लिकेशन को कंपाइल करने के बाद, आपको ActionScript 2 SWF की ज़रूरत होगी, जो YouTube Player API के साथ काम करता है. इस SWF को रिलीज़ संग्रह में यहां देखा जा सकता है: as3/lib/as2_tubeloc.swf. बस पक्का करें कि यह उस एचटीएमएल फ़ाइल के साथ हो जिसमें आपका SWF ऐप्लिकेशन एम्बेड किया गया है, जैसे:
my_app/ my_app.html as2_tubeloc.swf my_app.swf
ध्यान दें: लाइब्रेरी के साथ playerWrapperUrl प्रॉपर्टी का इस्तेमाल करके, इस SWF का पाथ बदला जा सकता है.
Movie.as का इस्तेमाल करना
आइए, TubeLoc के Flex वर्शन को इस्तेमाल करने का तरीका जानें. हम सबसे पहले, सभी कंट्रोल वाले फ़ुल-क्रोम प्लेयर के बारे में जानेंगे. इसके बाद, BYOC क्रोमलेस प्लेयर के बारे में जानेंगे. MXML में फ़ुल-च्rome प्लेयर का इस्तेमाल करने का तरीका यहां बताया गया है:
<tubeloc:Movie id="tubelocMovie" width="320" height="240" videoId="GJ1sZBTnbuE" />
मुझे पता है, मुझे पता है, दर्द हो रहा है, है न? बिलकुल नहीं! आइए, क्रोमलेस विंडो का इस्तेमाल करके, कुछ क्रिएटिव आज़माते हैं:
<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 नेमस्पेस जोड़ते हैं. ऐसा करने के बाद, हम कॉम्पोनेंट का इस्तेमाल उसी तरह कर सकते हैं जिस तरह से दिखाया गया है. बाद में, हम देखेंगे कि इस कॉम्पोनेंट को सेट करने और उस पर कॉल करने के लिए क्या उपलब्ध है.
MovieSprite.as का इस्तेमाल करना
अब आइए, TubeLoc के ActionScript 3 वर्शन का इस्तेमाल करने का तरीका जानें. इस वर्शन के लिए, Flex फ़्रेमवर्क की किसी क्लास की ज़रूरत नहीं होती. साथ ही, यह सिर्फ़ Flash Player की नेटिव क्लास का इस्तेमाल करता है. हम पहले फ़ुल-क्रोम प्लेयर और फिर क्रोमलेस प्लेयर बनाने का तरीका देखेंगे. इसका पूरा उदाहरण यहां दिया गया है:
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 क्लास का एक इंस्टेंस बनाते हैं और अपना वीडियो आईडी, MovieSprite के कन्स्ट्रक्टर में पास करते हैं. इसके बाद, हम PlayerReadyEvent के लिए इवेंट लिसनर जोड़ते हैं. onPlayerReady इवेंट हैंडलर में, हमने फ़िल्म का साइज़ सेट किया है. ध्यान दें: हम फ़ुल-क्रोम प्लेयर का इस्तेमाल कर रहे हैं. इसलिए, हम MovieSprite क्लास पर स्टैटिक प्रॉपर्टी CHROME_HEIGHT का फ़ायदा ले रहे हैं. इससे हमें 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 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 क्लास को बताता है कि हम क्रोमलेस विज्ञापन दिखाने जा रहे हैं. आपको onPlayerReady इवेंट हैंडलर में भी अंतर दिखेगा. यहां हम loadVideoById तरीके का इस्तेमाल करके, आईडी के हिसाब से अपना वीडियो लोड करते हैं.
मैं क्या कॉल करूं और मुझे क्या मिलेगा?
तो, कॉल करने के लिए क्या-क्या उपलब्ध है और हमें किन इवेंट के साथ काम करना है? डाउनलोड किए गए रिलीज़ संग्रह में, जानकारी पाने के लिए पूरा कोड दस्तावेज़ मौजूद है. खास जानकारी के तौर पर, Movie.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
इन तरीकों के अलावा, Movie.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
नतीजा
हमें उम्मीद है कि इस लेख से आपको अपने फ़्लैश ऐप्लिकेशन में, YouTube की सुविधाओं और कॉन्टेंट को इंटिग्रेट करने में मदद मिली होगी. TubeLoc का इस्तेमाल करके इवेंट बनाते समय, एक बात का ध्यान रखें: एक ही समय पर, स्टेज पर दो YouTube प्लेयर नहीं हो सकते.
हमें उम्मीद है कि इस समस्या को जल्द ही ठीक कर दिया जाएगा. इसलिए, अगर आपको कोई गड़बड़ी या कोई सुविधा नहीं मिलती है, तो कृपया Google Code प्रोजेक्ट पर जाएं और समस्या ट्रैकर में इसकी शिकायत करें. पढ़ने के लिए धन्यवाद!
लेखक के बारे में जानकारी
बेन लॉन्गरिया, यूनिवर्सिटी ऑफ़ विस्कॉन्सिन-मैडिसन के लिए एक अकादमिक ऐप्लिकेशन डेवलपर हैं. वे Flash 5 के बाद से Flash और Flex 2 के रिलीज़ होने के बाद से Flex का इस्तेमाल कर रहे हैं. पिछले दो सालों से, वे Mozilla के साथ काम करके ऐप्लिकेशन भी डेवलप कर रहे हैं. बेन ने कई शैक्षणिक और अकादमिक प्रोजेक्ट पर काम किया है. इनमें ब्राउज़र और डेस्कटॉप, दोनों को टारगेट करने वाले क्रॉस-प्लैटफ़ॉर्म ऐप्लिकेशन भी शामिल हैं. वे इंटरफ़ेस और इंटरैक्शन डिज़ाइन में सक्रिय भूमिका निभाते हैं. साथ ही, वे आसानी से इस्तेमाल किए जा सकने वाले सॉफ़्टवेयर बनाने की चुनौती का आनंद लेते हैं. उनका ब्लॉग http://enefekt.com/sansbrowser/ पर उपलब्ध है. साथ ही, InsideRIA पर उनके योगदान को पढ़ा जा सकता है.
इस काम के लिए, Creative Commons Attribution 3.0 United States License के तहत लाइसेंस मिला है.