YouTube Helper লাইব্রেরির সাহায্যে iOS অ্যাপ্লিকেশনে YouTube ভিডিও এম্বেড করা

youtube-ios-player-helper হল একটি ওপেন সোর্স লাইব্রেরি যা আপনাকে iOS অ্যাপ্লিকেশনে YouTube iframe প্লেয়ার এম্বেড করতে সাহায্য করে। লাইব্রেরি আপনার অ্যাপ্লিকেশনের Objective-C কোড এবং YouTube প্লেয়ারের জাভাস্ক্রিপ্ট কোডের মধ্যে একটি WebView এবং একটি ব্রিজ তৈরি করে, এর ফলে 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. এইসব ফাইল ও ফোল্ডার আপনার প্রোজেক্টে টেনে আনুন। ডেস্টিনেশন গ্রুপের ফোল্ডারে আইটেম কপি করুন বিকল্পটি বেছে নেওয়া হয়েছে কিনা তা নিশ্চিত করুন। অ্যাসেট ফোল্ডার ড্র্যাগ করার সময়, যোগ করা যেকোনও ফোল্ডারের জন্য ফোল্ডার রেফারেন্স তৈরি করুন বিকল্পে টিকচিহ্ন দেওয়া আছে কিনা তা নিশ্চিত করুন।

লাইব্রেরি এখন ইনস্টল হয়ে যাওয়ার কথা।

ইন্টারফেস বিল্ডার বা স্টোরিবোর্ডের মাধ্যমে 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];

স্টোরিবোর্ড বা ইন্টারফেস বিল্ডার খুলুন। আপনার View-তে দুটি বোতাম টেনে আনুন এবং সেগুলিকে চালান ও বন্ধ করুন হিসেবে লেবেল করুন। 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।

আপনার স্টোরিবোর্ড বা ইন্টারফেস বিল্ডার খুলুন এবং playVideo: ও stopVideo: মেথডের সাথে চালান ও বন্ধ করুন বোতাম কানেক্ট করতে কন্ট্রোল-ড্র্যাগ করুন।

এখন অ্যাপ্লিকেশন বিল্ড ও রান করুন। ভিডিও থাম্বনেল লোড হয়ে গেলে, আপনি প্লেয়ার কন্ট্রোল ছাড়াও নেটিভ কন্ট্রোল ব্যবহার করে ভিডিও চালাতে ও বন্ধ করতে পারবেন।

প্লেয়ার কলব্যাক হ্যান্ডেল করা

প্লেব্যাক ইভেন্ট প্রোগ্রাম্যাটিক্যালি ম্যানেজ করার ক্ষেত্রে এটি উপযোগী হতে পারে, যেমন প্লেব্যাক স্ট্যাটাস পরিবর্তন এবং প্লেব্যাক সংক্রান্ত সমস্যা। JavaScript API-তে, এটি ইভেন্ট লিসনার-এর মাধ্যমে করা হয়। Objective-C-তে,এটি delegate-এর মাধ্যমে করা হয়।

নিচের কোড থেকে কীভাবে 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 তৈরি করে এবং বেসিক প্লেয়ারের জন্য প্রয়োজনীয় HTML ও JavaScript রেন্ডার করে। লাইব্রেরির লক্ষ্য হল যতটা সম্ভব সহজে ব্যবহারযোগ্য হওয়া, এমন পদ্ধতি একত্রিত করা যা ডেভেলপারদের প্রায়ই প্যাকেজে লিখতে হয়। কয়েকটি সীমাবদ্ধতা রয়েছে যা মনে রাখা উচিত:

• লাইব্রেরিতে একাধিক YTPlayerView ইনস্ট্যান্সে একসাথে ভিডিও প্লেব্যাক করা যায় না। আপনার অ্যাপ্লিকেশনের একাধিক YTPlayerView ইনস্ট্যান্স থাকলে, সাজেস্ট করা একটি ভালো প্র্যাক্টিস হল, অন্য ইনস্ট্যান্সে প্লেব্যাক শুরু করার আগে যেকোনও বিদ্যমান ইনস্ট্যান্সে প্লেব্যাক পজ বা বন্ধ করা। প্রোজেক্টের সাথে পাঠানো উদাহরণ অ্যাপ্লিকেশনে, ViewControllers NSNotificationCenter ব্যবহার করে বিজ্ঞপ্তি ডিসপ্যাচ করে যে প্লেব্যাক শুরু হতে চলেছে। অন্যান্য ViewController-কে বিজ্ঞপ্তি পাঠানো হয় এবং তাদের YTPlayerView ইনস্ট্যান্সে প্লেব্যাক পজ করা হবে।
• সম্ভব হলে, আগে থেকে লোড করা YTPlayerView ইনস্ট্যান্স আবার ব্যবহার করুন। কোনও ভিউতে ভিডিও পরিবর্তন করার প্রয়োজন হলে, নতুন UIView ইনস্ট্যান্স বা নতুন YTPlayerView ইনস্ট্যান্স তৈরি করবেন না এবং loadVideoId: বা loadPlaylistId: কোনওটিই কল করবেন না। পরিবর্তে, cueVideoById:startSeconds: ফাংশন ফ্যামিলি ব্যবহার করুন, যা WebView রিলোড করে না। সম্পূর্ণ IFrame প্লেয়ার লোড করার সময় উল্লেখযোগ্য দেরি হয়।
• এই প্লেয়ার ব্যক্তিগত ভিডিও চালাতে পারে না, তবে এটি তালিকাভুক্ত নয় এমন ভিডিও চালাতে পারে। এই লাইব্রেরি আগে থেকেই থাকা iframe প্লেয়ারকে র‍্যাপ করে বলে, প্লেয়ারের আচরণ মোবাইল ব্রাউজারে ওয়েবপেজে এম্বেড করা প্লেয়ারের আচরণের সাথে প্রায় একই রকম হওয়া উচিত।

অবদান

এটি একটি ওপেন-সোর্স প্রোজেক্ট, তাই কোনও সমস্যা সমাধান বা উন্নতি করার থাকলে তা GitHub প্রোজেক্টের মাস্টার ব্রাঞ্চে জমা দিন।