تضمين فيديوهات على YouTube في تطبيقات iOS باستخدام مكتبة YouTube Helper

‫youtube-ios-player-helper هي مكتبة برامج مفتوحة المصدر تساعدك في تضمين مشغّل iframe على YouTube في تطبيق iOS. تنشئ المكتبة عنصر WebView وجسرًا بين رمز Objective-C في تطبيقك ورمز JavaScript في مشغّل YouTube، ما يسمح لتطبيق iOS بالتحكّم في مشغّل YouTube. توضّح هذه المقالة خطوات تثبيت المكتبة والبدء في استخدامها من تطبيق iOS.

تثبيت

تفترض هذه المقالة أنّك أنشأت مشروعًا جديدًا لتطبيق iOS ذي عرض واحد يستهدف أحدث إصدار من iOS، وأنّك أضفت الملفات التالية عند إنشاء المشروع:

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

يمكنك تثبيت المكتبة من خلال CocoaPods أو عن طريق نسخ المكتبة وملفات المصدر من صفحة GitHub الخاصة بالمشروع.

• تتوفّر المكتبة للتثبيت من خلال CocoaPods. بدلاً من ذلك، تتوفّر المكتبة وملفات المصدر من خلال صفحة GitHub الخاصة بالمشروع ويمكن نسخها إلى مشروع حالي.

تثبيت المكتبة من خلال CocoaPods

إذا كان مشروعك يستخدم CocoaPods، أضِف السطر أدناه إلى ملف Podfile لتثبيت المكتبة. في هذا السطر، استبدِل x.y.z بأحدث إصدار من pod، والذي سيتم تحديده على صفحة 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. في Finder، تتوفّر هذه الملفات في الدليل الجذر للمشروع في مجلدَي Classes وAssets.

3. اسحب هذه الملفات والمجلدات إلى مشروعك. تأكَّد من وضع علامة في الخيار Copy items into destination group’s folder (نسخ العناصر إلى مجلد مجموعة الوجهة). عند سحب مجلد "مواد العرض"، تأكَّد من وضع علامة في الخيار Create Folder References for any added folders (إنشاء مراجع مجلد لأي مجلدات تمت إضافتها).

من المفترض أن تكون المكتبة مثبّتة الآن.

إضافة YTPlayerView من خلال Interface Builder أو Storyboard

لإضافة YTPlayerView من خلال Interface Builder أو Storyboard:

1. اسحب نموذج UIView إلى العرض.

2. اختَر Identity Inspector وغيِّر فئة العرض إلى YTPlayerView.

3. افتح ViewController.h وأضِف العنوان التالي:

   #import “YTPlayerView.h”

   أضِف أيضًا السمة التالية:

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

4. في Interface Builder، أنشئ اتصالاً من عنصر العرض الذي حدّدته في الـ خطوة السابقة إلى سمة 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];

افتح Storyboard أو 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];
}

تتوفّر معادلات Objective-C لمعظم دوال IFrame Player API، على الرغم من أنّ بعض الـ أسماء قد تختلف قليلاً لتتطابق بشكل أكبر مع إرشادات كتابة رمز Objective-C. تشمل الاستثناءات البارزة الطرق التي تتحكّم في مستوى صوت الفيديو، لأنّ هذه الطرق يتم التحكّم فيها من خلال أجهزة الهاتف أو باستخدام نماذج UIView المضمّنة المصمّمة لهذا الغرض، مثل MPVolumeView.

افتح Storyboard أو 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 و عرض HTML وJavaScript اللازمَين لمشغّل أساسي. تهدف المكتبة إلى أن تكون سهلة الاستخدام قدر الإمكان، من خلال تجميع الطرق التي يضطر المطوّرون إلى كتابتها بشكل متكرّر في حزمة. هناك بعض القيود التي يجب ملاحظتها:

• لا تتيح المكتبة تشغيل الفيديوهات بشكل متزامن في نماذج متعددة YTPlayerView. إذا كان تطبيقك يتضمّن نماذج YTPlayerView متعددة، ننصحك بإيقاف التشغيل مؤقتًا أو إيقافه في أي نماذج حالية قبل بدء التشغيل في نموذج مختلف. في التطبيق النموذجي الذي يتم شحنه مع المشروع، تستخدم ViewControllers‏ NSNotificationCenter لإرسال إشعارات بأنّ التشغيل على وشك البدء. يتم إرسال إشعار إلى ViewControllers الأخرى وسيتم إيقاف التشغيل مؤقتًا في نماذج YTPlayerView الخاصة بها.
• أعِد استخدام نماذج YTPlayerView الحالية التي تم تحميلها كلما أمكن ذلك. عند الحاجة إلى تغيير فيديو في العرض، لا تنشئ نموذج UIView جديدًا أو نموذج YTPlayerView جديدًا، ولا تستدعِ loadVideoId: أو loadPlaylistId:. بدلاً من ذلك، استخدِم مجموعة الدوال cueVideoById:startSeconds:، التي لا تعيد تحميل WebView. يحدث تأخير ملحوظ عند تحميل مشغّل IFrame بالكامل.
• لا يمكن لهذا المشغّل تشغيل الفيديوهات الخاصة، ولكن يمكنه تشغيل الفيديوهات غير المُدرَجة. بما أنّ هذه المكتبة تتضمّن مشغّل iframe الحالي، من المفترض أن يكون سلوك المشغّل مطابقًا تقريبًا لسلوك مشغّل مضمّن في صفحة ويب في متصفّح للأجهزة الجوّالة.

المساهمات

بما أنّ هذا المشروع مفتوح المصدر، يُرجى إرسال الإصلاحات والتحسينات إلى الفرع الرئيسي لمشروع GitHub.