YouTube Helper Library की मदद से, iOS ऐप्लिकेशन में YouTube वीडियो एम्बेड करना

youtube-ios-player-helper एक ओपन सोर्स लाइब्रेरी है. इसकी मदद से, iOS ऐप्लिकेशन में YouTube iframe प्लेयर को एम्बेड किया जा सकता है. यह लाइब्रेरी, WebView और आपके ऐप्लिकेशन के Objective-C कोड और 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 का इस्तेमाल करते समय, आपको Xcode में .xcworkspace फ़ाइल खोलनी होगी, न कि .xcodeproj फ़ाइल.

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

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

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

1. Xcode या Finder में, सैंपल प्रोजेक्ट खोलें.

2. YTPlayerView.h, YTPlayerView.m, और ऐसेट फ़ोल्डर चुनें. अगर Xcode में वर्कस्पेस खोला जाता है, तो ये उपलब्ध होते हैं Pods -> Development Pods -> YouTube-Player-iOS-Helper और Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources. Finder में, ये प्रोजेक्ट की रूट डायरेक्ट्री में, Classes और Assets डायरेक्ट्री में उपलब्ध होते हैं.

3. इन फ़ाइलों और फ़ोल्डर को अपने प्रोजेक्ट में खींचें और छोड़ें. पक्का करें कि Copy items into destination group’s folder विकल्प चुना गया हो. Assets फ़ोल्डर को खींचते समय, पक्का करें कि Create Folder References for any added folders विकल्प चुना गया हो.

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

Interface Builder या Storyboard की मदद से, YTPlayerView जोड़ना

Interface Builder या Storyboard की मदद से, YTPlayerView जोड़ने के लिए:

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

2. Identity Inspector चुनें और व्यू की क्लास को YTPlayerView में बदलें.

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

   #import “YTPlayerView.h”

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

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

4. Interface Builder में, पिछले चरण में तय किए गए View एलिमेंट से, अपने View Controller की playerView प्रॉपर्टी तक कनेक्शन बनाएं.

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

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

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

वीडियो प्लेबैक कंट्रोल करना

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

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

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

स्टोरीबोर्ड या Interface Builder खोलें. अपने व्यू पर दो बटन खींचें और छोड़ें. इन्हें चलाएं और रोकें लेबल करें. 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 वर्शन मौजूद हैं. हालांकि, Objective-C कोडिंग के दिशा-निर्देशों के मुताबिक, कुछ के नाम में थोड़ा अंतर हो सकता है. वीडियो की आवाज़ को कंट्रोल करने वाले तरीकों में कुछ अपवाद हैं. ऐसा इसलिए है, क्योंकि इन्हें फ़ोन के हार्डवेयर या इस मकसद के लिए डिज़ाइन किए गए, UIView इंस्टेंस की मदद से कंट्रोल किया जाता है. जैसे, MPVolumeView.

अपना स्टोरीबोर्ड या Interface Builder खोलें और चलाएं और रोकें बटन को playVideo: और stopVideo: तरीकों से कनेक्ट करने के लिए, कंट्रोल-ड्रैग करें.

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

प्लेयर के कॉलबैक मैनेज करना

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

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

@interface ViewController : UIViewController<YTPlayerViewDelegate>

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

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 इंस्टेंस हैं, तो हमारा सुझाव है कि किसी दूसरे इंस्टेंस में प्लेबैक शुरू करने से पहले, मौजूदा इंस्टेंस में प्लेबैक रोकें या बंद करें. प्रोजेक्ट के साथ शिप होने वाले सैंपल ऐप्लिकेशन में, ViewControllers, NSNotificationCenter का इस्तेमाल करके, सूचनाएं भेजते हैं. इन सूचनाओं में बताया जाता है कि प्लेबैक शुरू होने वाला है. अन्य ViewControllers को सूचना मिलती है और वे अपने YTPlayerView इंस्टेंस में प्लेबैक रोक देंगे.
• जब भी हो सके, अपने मौजूदा, लोड किए गए YTPlayerView इंस्टेंस का दोबारा इस्तेमाल करें. किसी व्यू में वीडियो बदलने के लिए, नया UIView इंस्टेंस या नया YTPlayerView इंस्टेंस न बनाएं. साथ ही, loadVideoId: या loadPlaylistId: को कॉल न करें. इसके बजाय, cueVideoById:startSeconds: फ़ंक्शन के परिवार का इस्तेमाल करें. इससे WebView फिर से लोड नहीं होता. पूरे IFrame प्लेयर को लोड करने में काफ़ी समय लगता है.
• यह प्लेयर, निजी वीडियो नहीं चला सकता. हालांकि, यह सबके लिए मौजूद नहीं के तौर पर सेट वीडियो चला सकता है. यह लाइब्रेरी, मौजूदा iframe प्लेयर को रैप करती है. इसलिए, प्लेयर का बर्ताव, मोबाइल ब्राउज़र में किसी वेबपेज पर एम्बेड किए गए प्लेयर के बर्ताव के जैसा ही होना चाहिए.

योगदान

यह एक ओपन-सोर्स प्रोजेक्ट है. इसलिए, कृपया GitHub project की master branch में, गड़बड़ियां ठीक करने और सुधार के लिए सबमिट करें.