YouTube सहायक लाइब्रेरी से YouTube ऐप्लिकेशन को iOS ऐप्लिकेशन में एम्बेड करें

youtube-ios-player-helper एक ओपन सोर्स लाइब्रेरी है जो आपको YouTube iframe प्लेयर को iOS ऐप्लिकेशन में एम्बेड करने में मदद करती है. लाइब्रेरी WebView और आपके ऐप्लिकेशन के मकसद-सी कोड और YouTube प्लेयर के JavaScript कोड के बीच एक पुल बनाती है, ताकि iOS ऐप्लिकेशन YouTube प्लेयर को नियंत्रित कर सके. इस लेख में, लाइब्रेरी को इंस्टॉल करने का तरीका बताया गया है. साथ ही, इसमें iOS ऐप्लिकेशन से इसका इस्तेमाल शुरू करने का तरीका भी बताया गया है.

इंस्टॉल करना

इस लेख में यह माना गया है कि आपने iOS के सबसे नए वर्शन को टारगेट करने वाला एक नया सिंगल ऐप्लिकेशन ऐप्लिकेशन iOS प्रोजेक्ट बनाया है. साथ ही, आपने प्रोजेक्ट बनाते समय नीचे दी गई फ़ाइलें जोड़ी हैं:

• Main.storyboard
• ViewController.h
• ViewController.m

इस लाइब्रेरी को इंस्टॉल करने के लिए, CocoaPods का इस्तेमाल करें. इसके अलावा, प्रोजेक्ट के GitHub पेज से लाइब्रेरी और सोर्स फ़ाइलें कॉपी करके भी इंस्टॉल किया जा सकता है.

• इस लाइब्रेरी में CocoaPods का इस्तेमाल करके इंस्टॉल किया जा सकता है. इसके अलावा, लाइब्रेरी और सोर्स फ़ाइलें प्रोजेक्ट के GitHub पेज से देखी जा सकती हैं. साथ ही, उन्हें मौजूदा प्रोजेक्ट में कॉपी किया जा सकता है.

CocoaPods का इस्तेमाल करके लाइब्रेरी इंस्टॉल करना

अगर आपके प्रोजेक्ट में CocoaPods का इस्तेमाल किया जाता है, तो लाइब्रेरी को इंस्टॉल करने के लिए नीचे दी गई लाइन को Podfile में जोड़ें. इस लाइन में, x.y.z को पॉड के सबसे नए वर्शन से बदलें. इसकी जानकारी, प्रोजेक्ट के GitHub पेज पर दी जाएगी.

pod "youtube-ios-player-helper", "~> x.y.z"

कमांड लाइन प्रॉम्प्ट पर, डिपेंडेंसी के साथ अपने फ़ाइल फ़ोल्डर को अपडेट करने के लिए, pod install लिखें.

ध्यान दें: CocoaPods का इस्तेमाल करते समय, आपको .xcworkspace फ़ाइल को Xcode में खोलना होगा, न कि .xcodeproj फ़ाइल में.

ज़्यादा जानने के लिए, CocoaPods का ट्यूटोरियल देखें.

लाइब्रेरी को मैन्युअल तरीके से इंस्टॉल करना

हेल्पर लाइब्रेरी को मैन्युअल तरीके से इंस्टॉल करने के लिए, GitHub के डाउनलोड लिंक का इस्तेमाल करके सोर्स को डाउनलोड करें या रिपॉज़िटरी (डेटा स्टोर करने की जगह) का क्लोन बनाएं. कोड की स्थानीय कॉपी मिलने के बाद, यह तरीका अपनाएं:

1. नमूने के प्रोजेक्ट को Xcode या Finder में खोलें.

2. YTPlayerView.h, YTPlayerView.m, और एसेट फ़ोल्डर चुनें. अगर फ़ाइल फ़ोल्डर को Xcode में खोला जाता है, तो उसे पॉड -> डेवलपमेंट पॉड -> YouTube-Player-iOS-हेल्पर और पॉड -> डेवलपमेंट पॉड -> YouTube-Player-iOS-हेल्पर -> संसाधनों में जाकर ऐक्सेस किया जा सकता है. फ़ाइंडर में, ये कक्षाओं और एसेट निर्देशिकाओं में प्रोजेक्ट की रूट निर्देशिका में उपलब्ध हैं.

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

लाइब्रेरी अब इंस्टॉल हो जानी चाहिए.

YTPlayerView को इंटरफ़ेस बिल्डर या स्टोरीबोर्ड के ज़रिए जोड़ें

इंटरफ़ेस बिल्डर या स्टोरीबोर्ड के ज़रिए YTPlayerView जोड़ने के लिए:

1. अपने व्यू पर UIView इंस्टेंस खींचें और छोड़ें.

2. आइडेंटिटी इंस्पेक्टर चुनें और व्यू की क्लास को YTPlayerView में बदलें.

3. ViewController.h खोलें और यह हेडर जोड़ें:

   #import “YTPlayerView.h”

   साथ ही, यह प्रॉपर्टी भी जोड़ें:

   @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;

4. इंटरफ़ेस बिल्डर में, व्यू एलिमेंट से एक कनेक्शन बनाएं, जिसे आपने पिछले चरण में अपनी व्यू कंट्रोलर की playerView प्रॉपर्टी के लिए तय किया था.

5. अब ViewController.m खोलें और अपने viewDidLoad तरीके के आखिर में यह कोड जोड़ें:

   [self.playerView loadWithVideoId:@"M7lc1UVf-VE"];

अपना ऐप्लिकेशन बनाएं और उसे चलाएं. वीडियो का थंबनेल लोड होने पर, फ़ुलस्क्रीन वीडियो प्लेयर को लॉन्च करने के लिए वीडियो के थंबनेल पर टैप करें.

वीडियो चलाने की सुविधा को कंट्रोल करना

ViewController::loadWithVideoId: तरीके में एक वैरिएंट, loadWithVideoId:playerVars: होता है. इसकी मदद से, डेवलपर व्यू में अन्य प्लेयर वैरिएबल पास कर सकते हैं. ये प्लेयर वैरिएबल, IFrame Player API में प्लेयर पैरामीटर के मुताबिक होते हैं. playsinline पैरामीटर, वीडियो को फ़ुलस्क्रीन पर चलाने के बजाय सीधे व्यू में चला सकता है. जब कोई वीडियो इनलाइन चलाया जाता है, तो iOS ऐप्लिकेशन में वीडियो को प्रोग्राम के हिसाब से, अपने-आप कंट्रोल किया जा सकता है.

loadWithVideoId: कॉल को इस कोड से बदलें:

NSDictionary *playerVars = @{
  @"playsinline" : @1,
};
[self.playerView loadWithVideoId:@"M7lc1UVf-VE" playerVars:playerVars];

स्टोरीबोर्ड या इंटरफ़ेस बिल्डर खोलें. अपने व्यू पर दो बटन खींचें और उन्हें चलाएं और बंद करें के तौर पर लेबल करें. ViewController.h खोलें और इन तरीकों को जोड़ें, जो बटन पर मैप किए जाएंगे:

- (IBAction)playVideo:(id)sender;
- (IBAction)stopVideo:(id)sender;

अब ViewController.m खोलें और इन दो फ़ंक्शन को तय करें:

- (IBAction)playVideo:(id)sender {
  [self.playerView playVideo];
}

- (IBAction)stopVideo:(id)sender {
  [self.playerView stopVideo];
}

Iframe Player API के ज़्यादातर फ़ंक्शन में Objective-C के जैसा एक या उससे ज़्यादा फ़ंक्शन होते हैं. हालांकि, कुछ नाम का मकसद मकसद-सी कोडिंग के दिशा-निर्देशों से थोड़ा अलग होता है. ध्यान देने लायक अपवाद, वीडियो के वॉल्यूम को कंट्रोल करने के तरीके होते हैं, क्योंकि इन्हें फ़ोन हार्डवेयर से या इस मकसद से डिज़ाइन किए गए UIView इंस्टेंस के साथ कंट्रोल किया जाता है, जैसे कि MPVolumeView.

अपने स्टोरीबोर्ड या इंटरफ़ेस बिल्डर को खोलें और चलाएं और रोकें बटन को playVideo: और stopVideo: तरीकों से कनेक्ट करें.

अब ऐप्लिकेशन बनाएं और उसे चलाएं. वीडियो थंबनेल लोड होने के बाद, प्लेयर के कंट्रोल के अलावा, नेटिव कंट्रोल का इस्तेमाल करके वीडियो को चलाया और बंद किया जा सकता है.

प्लेयर के कॉलबैक हैंडल करें

यह प्लेबैक इवेंट, जैसे कि वीडियो की स्थिति में बदलाव और वीडियो चलाने में होने वाली गड़बड़ियों को प्रोग्राम के हिसाब से मैनेज करने के लिए मददगार हो सकता है. JavaScript एपीआई में, इवेंट लिसनर का इस्तेमाल करके ऐसा किया जा सकता है. Objective-C में,यह किसी डेलीगेट के साथ किया जाता है.

यह कोड, ViewController.h में इंटरफ़ेस के एलान को अपडेट करने का तरीका बताता है, ताकि क्लास डेलिगेट प्रोटोकॉल के मुताबिक हो. ViewController.h के इंटरफ़ेस के एलान को इस तरह बदलें:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate, प्लेयर में वीडियो चलाने से जुड़े इवेंट को हैंडल करने का प्रोटोकॉल है. कुछ इवेंट को हैंडल करने के लिए, ViewController.m को अपडेट करने के लिए, आपको पहले ViewController इंस्टेंस को YTPlayerView इंस्टेंस के प्रतिनिधि के तौर पर सेट करना होगा. यह बदलाव करने के लिए, ViewController.h में viewDidLoad तरीके में यह लाइन जोड़ें.

self.playerView.delegate = self;

अब ViewController.m में यह तरीका जोड़ें:

- (void)playerView:(YTPlayerView *)playerView didChangeToState:(YTPlayerState)state {
  switch (state) {
    case kYTPlayerStatePlaying:
      NSLog(@"Started playback");
      break;
    case kYTPlayerStatePaused:
      NSLog(@"Paused playback");
      break;
    default:
      break;
  }
}

ऐप्लिकेशन बनाएं और उसे चलाएं. प्लेयर की स्थिति बदलने पर, Xcode में लॉग आउटपुट देखें. वीडियो चलने या बंद होने पर, आपको अपडेट दिखने चाहिए.

लाइब्रेरी, कॉन्सटेंट उपलब्ध कराती है. यह kYT* प्रीफ़िक्स से शुरू होता है. इससे, पेज को आसानी से पढ़ा और पढ़ा जा सकता है. इन कॉन्सटेंट की पूरी सूची देखने के लिए, YTPlayerView.m पर जाएं.

सबसे सही तरीके और सीमाएं

लाइब्रेरी, IFrame Player API के ऊपर बनाई जाती है और WebView को बनाने और मूल प्लेयर के लिए ज़रूरी एचटीएमएल और JavaScript को रेंडर करने पर काम करती है. लाइब्रेरी का लक्ष्य इस्तेमाल करने में ज़्यादा आसान बनाना है, इसलिए ऐसे तरीकों को बंडल करना होता है जिन्हें डेवलपर अक्सर पैकेज में लिखते हैं. कुछ सीमाओं के बारे में ध्यान देना चाहिए:

• इस लाइब्रेरी में, एक साथ कई YTPlayerView वीडियो नहीं चल सकते. अगर आपके ऐप्लिकेशन में एक से ज़्यादा इंस्टेंस YTPlayerView हैं, तो हमारा सुझाव है कि किसी दूसरे इंस्टेंस में वीडियो चलाने से पहले, मौजूदा इंस्टेंस पर वीडियो को कुछ समय के लिए रोकें या बंद कर दें. उदाहरण के तौर पर दिया गया ऐप्लिकेशन, जो प्रोजेक्ट के साथ शिप किया जाता है, में व्यूकंट्रोलर NSNotificationCenter का इस्तेमाल करके, सूचनाएं भेजने के लिए करता है, ताकि वीडियो चलाने की प्रक्रिया शुरू होने वाली हो. अन्य ViewControllers सूचना देते हैं और अपने YTPlayerView इंस्टेंस में वीडियो को रोक देते हैं.
• अगर हो सके, तो अपने मौजूदा YTPlayerView लोड किए गए इंस्टेंस का फिर से इस्तेमाल करें. व्यू में किसी वीडियो को बदलने की ज़रूरत होने पर, नया UIView इंस्टेंस या नया YTPlayerView इंस्टेंस न बनाएं. साथ ही, loadVideoId: या loadPlaylistId: को कॉल न करें. इसके बजाय, cueVideoById:startSeconds: फ़ंक्शन का इस्तेमाल करें, जो WebView को फिर से लोड नहीं करता है. पूरे iFrame प्लेयर को लोड करते समय काफ़ी समय लग रहा है.
• यह प्लेयर निजी वीडियो नहीं चला सकता. हालांकि, यह सबके लिए मौजूद नहीं होने वाले वीडियो चला सकता है. यह लाइब्रेरी मौजूदा iframe प्लेयर को रैप करती है. इसलिए, प्लेयर का व्यवहार मोबाइल ब्राउज़र में वेबपेज पर एम्बेड किए गए प्लेयर की तरह ही होना चाहिए.

योगदान

यह एक ओपन सोर्स प्रोजेक्ट है, इसलिए कृपया GitHub प्रोजेक्ट की मास्टर ब्रांच में सुधार और सुधार सबमिट करें.