جاسازی ویدیوهای YouTube در برنامه‌های iOS با کتابخانه کمکی YouTube

youtube-ios-player-helper یک کتابخانه متن‌باز است که به شما کمک می‌کند یک پخش‌کننده iframe YouTube را در یک برنامه iOS جاسازی کنید. این کتابخانه یک WebView و یک پل ارتباطی بین کد Objective-C برنامه شما و کد جاوا اسکریپت پخش‌کننده YouTube ایجاد می‌کند و از این طریق به برنامه iOS اجازه می‌دهد پخش‌کننده YouTube را کنترل کند. این مقاله مراحل نصب کتابخانه و شروع استفاده از آن را در برنامه iOS شما شرح می‌دهد.

نصب

این مقاله فرض می‌کند که شما یک پروژه جدید Single View Application 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 باز کنید، این موارد در Pods -> Development Pods -> YouTube-Player-iOS-Helper و Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources دردسترس هستند. در «یابنده»، این‌ها در فهرستگان ریشه پروژه در فهرستگان‌های کلاس‌ها و دارایی‌ها دردسترس هستند.

3. این فایل‌ها و پوشه‌ها را به پروژه‌تان بکشید. مطمئن شوید گزینه کپی کردن موارد در پوشه گروه مقصد علامت خورده باشد. هنگام کشیدن پوشه «دارایی‌ها»، مطمئن شوید که گزینه ایجاد مرجع پوشه برای هر پوشه اضافه‌شده علامت خورده باشد.

اکنون کتابخانه باید نصب شده باشد.

افزودن YTPlayerView ازطریق «سازنده میانای کاربری» یا «داستان‌نما»

برای افزودن YTPlayerView ازطریق «سازنده میانای» یا «داستان‌نما»:

1. نمونه UIView را به «نمای» خود بکشید.

2. Identity Inspector را انتخاب کنید و کلاس نما را به 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، این کار با نماینده انجام می‌شود.

کد زیر نحوه به‌روزرسانی بیانیه میانای 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 مراجعه کنید.

روال‌های مطلوب و محدودیت‌ها

این کتابخانه با ایجاد WebView و ارائه HTML و JavaScript موردنیاز برای یک پخش‌کننده پایه، بر روی IFrame Player API ساخته می‌شود. هدف این کتابخانه این است که تا حد امکان استفاده از آن آسان باشد و روش‌هایی را که توسعه‌دهندگان اغلب مجبورند در بسته‌ای بنویسند، دسته‌بندی کند. چند محدودیت وجود دارد که باید به آن‌ها توجه شود:

• این کتابخانه از بازپخش هم‌زمان ویدیو در چند YTPlayerView نمونه پشتیبانی نمی‌کند. اگر برنامه شما چندین YTPlayerView نمونه دارد، روال مطلوب توصیه‌شده این است که قبل‌از شروع بازپخش در نمونه‌ای دیگر، بازپخش را در همه نمونه‌های موجود موقتاً متوقف کنید یا آن را متوقف کنید. در نمونه برنامه کاربردی که با پروژه ارسال می‌شود، ViewControllers از NSNotificationCenter برای ارسال اعلان‌هایی استفاده می‌کند که بازپخش در آستانه شروع است. ‫ViewControllers دیگر مطلع می‌شوند و بازپخش را در نمونه‌های YTPlayerView خود موقتاً متوقف می‌کنند.
• درصورت امکان، از نمونه‌های YTPlayerView بارشده موجودتان استفاده مجدد کنید. وقتی ویدیویی در «نما» نیاز به تغییر دارد، نمونه جدید UIView یا نمونه جدید YTPlayerView ایجاد نکنید و loadVideoId: یا loadPlaylistId: را فراخوانی نکنید. درعوض، از خانواده توابع cueVideoById:startSeconds: استفاده کنید که WebView را مجدداً بار نمی‌کنند. هنگام بار کردن کل پخش‌کننده IFrame، تأخیر قابل‌توجهی وجود دارد.
• این پخش‌کننده نمی‌تواند ویدیوهای خصوصی را پخش کند، اما می‌تواند ویدیوهای فهرست‌نشده را پخش کند. ازآنجایی‌که این کتابخانه پخش‌کننده iframe موجود را می‌پیچد، رفتار پخش‌کننده باید تقریباً مشابه رفتار پخش‌کننده‌ای باشد که در صفحه وب در مرورگر تلفن همراه جاسازی شده است.

همیاری‌ها

ازآنجایی‌که این پروژه متن‌باز است، لطفاً اصلاحات و بهبودها را به شاخه اصلی پروژه GitHub ارسال کنید.