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

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

نصب و راه اندازی

این مقاله فرض می‌کند که شما یک پروژه جدید iOS Application Single View ایجاد کرده‌اید که آخرین نسخه iOS را هدف قرار می‌دهد، و هنگام ایجاد پروژه، فایل‌های زیر را اضافه می‌کنید:

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

می‌توانید کتابخانه را از طریق CocoaPods یا با کپی کردن کتابخانه و فایل‌های منبع از صفحه GitHub پروژه نصب کنید.

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

کتابخانه را از طریق CocoaPods نصب کنید

اگر پروژه شما از CocoaPods استفاده می کند، خط زیر را به Podfile خود اضافه کنید تا کتابخانه را نصب کنید. در آن خط، xyz با آخرین نسخه پاد جایگزین کنید، که در صفحه 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 و پوشه Assets را انتخاب کنید. اگر فضای کاری را در Xcode باز کنید، اینها در زیر Pods -> Development Pods -> YouTube-Player-iOS-Helper and Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources در دسترس هستند. در Finder، اینها در دایرکتوری ریشه پروژه در فهرست‌های کلاس‌ها و دارایی‌ها در دسترس هستند.

  3. این فایل ها و پوشه ها را به داخل پروژه خود بکشید. مطمئن شوید که گزینه Copy items into destination's folder's تیک زده شده است. هنگام کشیدن پوشه Assets، مطمئن شوید که گزینه Create Folder References for any added folders تیک خورده باشد.

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

یک YTPlayerView از طریق Interface Builder یا Storyboard اضافه کنید

برای افزودن YTPlayerView از طریق Interface Builder یا Storyboard:

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

  2. Identity Inspector را انتخاب کنید و کلاس view را به YTPlayerView تغییر دهید.

  3. ViewController.h باز کنید و هدر زیر را اضافه کنید:

    #import “YTPlayerView.h”

    همچنین ویژگی زیر را اضافه کنید:

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

  4. در Interface Builder، یک اتصال از عنصر View که در مرحله قبل تعریف کردید به ویژگی playerView در View Controller خود ایجاد کنید.

  5. حالا ViewController.m باز کنید و کد زیر را به انتهای متد viewDidLoad خود اضافه کنید:

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

اپلیکیشن خود را بسازید و اجرا کنید. وقتی تصویر کوچک ویدیو بارگیری شد، روی تصویر کوچک ویدیو ضربه بزنید تا پخش کننده ویدیوی تمام صفحه راه اندازی شود.

کنترل پخش ویدیو

متد ViewController::loadWithVideoId: یک نوع دارد، loadWithVideoId:playerVars: که به توسعه دهندگان اجازه می دهد تا متغیرهای پخش کننده اضافی را به view ارسال کنند. این متغیرهای پخش کننده با پارامترهای پخش کننده در API IFrame Player مطابقت دارند. پارامتر playsinline ویدیو را قادر می‌سازد تا به‌جای پخش تمام صفحه، مستقیماً در نما پخش شود. هنگامی که یک ویدیو به صورت درون خطی در حال پخش است، برنامه حاوی iOS می تواند پخش را به صورت برنامه ای کنترل کند.

loadWithVideoId: call را با این کد جایگزین کنید:

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

استوری بورد یا Interface Builder را باز کنید. دو دکمه را روی View خود بکشید و روی آنها برچسب Play و Stop بزنید. 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 خود را باز کنید و برای اتصال دکمه‌های Play و Stop به متدهای playVideo: و stopVideo: کنترل کنید.

حالا اپلیکیشن را بسازید و اجرا کنید. پس از بارگیری تصویر کوچک ویدیو، باید بتوانید با استفاده از کنترل های بومی علاوه بر کنترل های پخش کننده، ویدیو را پخش و متوقف کنید.

رسیدگی به تماس های پخش کننده

مدیریت برنامه‌ریزی رویدادهای پخش، مانند تغییرات وضعیت پخش و خطاهای پخش، می‌تواند مفید باشد. در JavaScript API، این کار با شنوندگان رویداد انجام می شود. در Objective-C، این کار با یک delegate انجام می شود.

کد زیر نحوه به روز رسانی اعلان رابط در ViewController.h را نشان می دهد تا کلاس با پروتکل delegate مطابقت داشته باشد. اعلان رابط 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 و جاوا اسکریپت مورد نیاز برای یک پخش کننده اصلی بر روی API IFrame Player ساخته می شود. هدف این کتابخانه این است که تا حد امکان استفاده آسان باشد و روش‌هایی را که توسعه‌دهندگان اغلب باید در یک بسته بنویسند، جمع‌بندی کند. چند محدودیت وجود دارد که باید به آنها توجه کرد:

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

مشارکت ها

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