ইউটিউব হেল্পার লাইব্রেরির সাথে iOS অ্যাপ্লিকেশনগুলিতে YouTube ভিডিওগুলি এম্বেড করুন৷

youtube-ios-player-helper হল একটি ওপেন সোর্স লাইব্রেরি যা আপনাকে একটি iOS অ্যাপ্লিকেশনে একটি YouTube iframe প্লেয়ার এম্বেড করতে সাহায্য করে৷ লাইব্রেরি একটি WebView তৈরি করে এবং আপনার অ্যাপ্লিকেশনের অবজেক্টিভ-সি কোড এবং YouTube প্লেয়ারের জাভাস্ক্রিপ্ট কোডের মধ্যে একটি সেতু তৈরি করে, যার ফলে iOS অ্যাপ্লিকেশনটিকে YouTube প্লেয়ারকে নিয়ন্ত্রণ করার অনুমতি দেয়। এই নিবন্ধটি লাইব্রেরি ইনস্টল করার এবং আপনার iOS অ্যাপ্লিকেশন থেকে এটি ব্যবহার শুরু করার পদক্ষেপগুলি বর্ণনা করে৷

স্থাপন

এই নিবন্ধটি অনুমান করে যে আপনি iOS এর সর্বশেষ সংস্করণকে লক্ষ্য করে একটি নতুন একক দৃশ্য অ্যাপ্লিকেশন iOS প্রকল্প তৈরি করেছেন এবং প্রকল্পটি তৈরি করার সময় আপনি নিম্নলিখিত ফাইলগুলি যুক্ত করেছেন:

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

আপনি CocoaPods মাধ্যমে বা প্রকল্পের GitHub পৃষ্ঠা থেকে লাইব্রেরি এবং উত্স ফাইল অনুলিপি করে লাইব্রেরি ইনস্টল করতে পারেন।

  • লাইব্রেরিটি CocoaPods এর মাধ্যমে ইনস্টল করার জন্য উপলব্ধ। বিকল্পভাবে, লাইব্রেরি এবং উত্স ফাইলগুলি প্রকল্পের GitHub পৃষ্ঠার মাধ্যমে উপলব্ধ এবং একটি বিদ্যমান প্রকল্পে অনুলিপি করা যেতে পারে।

কোকোপডসের মাধ্যমে লাইব্রেরি ইনস্টল করুন

যদি আপনার প্রকল্পটি CocoaPods ব্যবহার করে, তাহলে লাইব্রেরি ইনস্টল করতে আপনার পডফাইলে নীচের লাইনটি যোগ করুন। সেই লাইনে, xyz সর্বশেষ পড সংস্করণ দিয়ে প্রতিস্থাপন করুন, যা প্রকল্পের গিটহাব পৃষ্ঠায় চিহ্নিত করা হবে।

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

কমান্ড লাইন প্রম্পটে, নির্ভরশীলতার সাথে আপনার ওয়ার্কস্পেস আপডেট করতে pod install টাইপ করুন।

টিপ: মনে রাখবেন যে CocoaPods ব্যবহার করার সময়, আপনাকে অবশ্যই .xcworkspace ফাইলটি Xcode-এ খুলতে হবে, .xcodeproj ফাইলে নয়৷

আরও জানতে CocoaPods টিউটোরিয়াল দেখুন।

লাইব্রেরিটি ম্যানুয়ালি ইনস্টল করুন

সাহায্যকারী লাইব্রেরিটি ম্যানুয়ালি ইনস্টল করতে, হয় গিটহাবের ডাউনলোড লিঙ্কের মাধ্যমে উত্সটি ডাউনলোড করুন বা সংগ্রহস্থলটি ক্লোন করুন। একবার আপনার কাছে কোডের একটি স্থানীয় অনুলিপি হয়ে গেলে, এই পদক্ষেপগুলি অনুসরণ করুন:

  1. এক্সকোড বা ফাইন্ডারে নমুনা প্রকল্পটি খুলুন।

  2. YTPlayerView.h , YTPlayerView.m , এবং সম্পদ ফোল্ডার নির্বাচন করুন। আপনি যদি Xcode-এ ওয়ার্কস্পেস খোলেন, তাহলে এগুলো Pods -> Development Pods -> YouTube-Player-iOS-Helper এবং Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources-এর অধীনে পাওয়া যায়। ফাইন্ডারে, এগুলো ক্লাস এবং অ্যাসেট ডিরেক্টরিতে প্রোজেক্টের রুট ডিরেক্টরিতে পাওয়া যায়।

  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];
}

আইফ্রেম প্লেয়ার এপিআই ফাংশনের বেশিরভাগেরই অবজেক্টিভ-সি সমতুল্য রয়েছে, যদিও কিছু নামকরণে কিছুটা ভিন্নতা থাকতে পারে যাতে অবজেক্টিভ-সি কোডিং নির্দেশিকা আরও ঘনিষ্ঠভাবে মেলে। উল্লেখযোগ্য ব্যতিক্রমগুলি হল ভিডিওর ভলিউম নিয়ন্ত্রণ করার পদ্ধতি, যেহেতু এগুলি ফোন হার্ডওয়্যার দ্বারা নিয়ন্ত্রিত হয় বা এই উদ্দেশ্যে ডিজাইন করা UIView দৃষ্টান্তগুলির দ্বারা নিয়ন্ত্রিত হয়, যেমন MPVolumeView

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

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

প্লেয়ার কলব্যাকগুলি পরিচালনা করুন

প্লেব্যাক ইভেন্টগুলি যেমন প্লেব্যাক স্টেট পরিবর্তন এবং প্লেব্যাক ত্রুটিগুলি প্রোগ্রাম্যাটিকভাবে পরিচালনা করতে এটি কার্যকর হতে পারে। JavaScript API-এ, ইভেন্ট শ্রোতাদের সাথে এটি করা হয়। অবজেক্টিভ-সি-তে, এটি একটি প্রতিনিধির সাথে করা হয়।

নিম্নলিখিত কোডটি দেখায় কিভাবে ViewController.h এ ইন্টারফেস ঘোষণা আপডেট করতে হয় যাতে ক্লাসটি প্রতিনিধি প্রোটোকলের সাথে সামঞ্জস্যপূর্ণ হয়। নিম্নরূপ ViewController.h এর ইন্টারফেস ঘোষণা পরিবর্তন করুন:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate হল প্লেয়ারে প্লেব্যাক ইভেন্টগুলি পরিচালনা করার জন্য একটি প্রোটোকল৷ কিছু ইভেন্ট পরিচালনা করার জন্য ViewController.m আপডেট করতে, আপনাকে প্রথমে YTPlayerView উদাহরণের প্রতিনিধি হিসাবে ViewController দৃষ্টান্ত সেট করতে হবে। এই পরিবর্তন করতে, ViewController.hviewDidLoad পদ্ধতিতে নিম্নলিখিত লাইনটি যোগ করুন।

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 দেখুন।

সর্বোত্তম অনুশীলন এবং সীমাবদ্ধতা

একটি WebView তৈরি করে এবং মৌলিক প্লেয়ারের জন্য প্রয়োজনীয় HTML এবং জাভাস্ক্রিপ্ট রেন্ডার করার মাধ্যমে লাইব্রেরিটি IFrame Player API-এর উপরে তৈরি করে। লাইব্রেরির লক্ষ্য হল যতটা সম্ভব সহজে ব্যবহার করা, বান্ডলিং পদ্ধতি যা ডেভেলপারদের প্রায়শই একটি প্যাকেজে লিখতে হয়। কয়েকটি সীমাবদ্ধতা রয়েছে যা লক্ষ করা উচিত:

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

অবদানসমূহ

যেহেতু এটি একটি ওপেন সোর্স প্রকল্প, অনুগ্রহ করে GitHub প্রকল্পের মাস্টার শাখায় সংশোধন এবং উন্নতি জমা দিন।