הטמעה של סרטוני YouTube באפליקציות ל-iOS עם ספריית העזרה של YouTube

youtube-ios-player-helper היא ספריית קוד פתוח שעוזרת לך להטמיע נגן iframe של YouTube באפליקציה ל-iOS. הספרייה יוצרת WebView וגשר בין קוד המטרה-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, הם זמינים בספריית הבסיס של הפרויקט בספריות Classs ו-Assets.

  3. גוררים את הקבצים והתיקיות האלה לפרויקט. יש לוודא שהאפשרות העתקת פריטים לתיקייה של קבוצת היעד מסומנת. כשגוררים את תיקיית הנכסים, מוודאים שהאפשרות יצירת הפניות לתיקייה עבור כל התיקיות שנוספו מסומנת.

הספרייה אמורה להיות מותקנת כעת.

הוספת YTPlayerView באמצעות Builder Builder או לוח הסיפור

כדי להוסיף YTPlayerView באמצעות Builder Builder או לוח הסיפור:

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

לרוב הפונקציות של ממשק ה-API של IFrame Player יש מקבילים של CW, למרות שחלק ממתן השמות עשוי להשתנות מעט בהתאם להנחיות הקידוד של יעדים-C. חריגים בולטים הם השיטות ששולטות בעוצמת הקול של הסרטון, מאחר שהציוד הזה נשלט על ידי החומרה של הטלפון או עם מכונות UIView מובנות למטרה זו, כמו MPVolumeView.

יש לפתוח את לוח הסיפור או את הכלי ליצירת ממשק ולגרור באמצעות העכבר כדי לחבר את הלחצנים הפעלה ועצירה לשיטות של playVideo: ול-stopVideo:.

עכשיו בונים ומפעילים את האפליקציה. לאחר טעינת התמונה הממוזערת של הסרטון, תהיה לך אפשרות להפעיל ולהפסיק את הסרטון באמצעות פקדים מקוריים, בנוסף לפקדי הנגן.

טיפול בקריאות חוזרות של הנגן

כדאי להשתמש בהגדרה כדי לטפל באופן פרוגרמטי באירועי הפעלה, כמו שינויים במצב ההפעלה ושגיאות בהפעלה. ב-JavaScript API, הדבר מתבצע באמצעות פונקציות event listener. ב-Object-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, מומלץ להשהות או להפסיק את ההפעלה בכל המופעים הקיימים לפני שמתחילים בהפעלה במכונה אחרת. באפליקציה לדוגמה שמספקת את הפרויקט, הבקרים משתמשים ב-NSNotificationCenter כדי לשלוח התראות על כך שההפעלה עומדת להתחיל. בעלי השליטה האחרים מקבלים הודעה והם ישהו את ההפעלה במכונות של YTPlayerView.
  • כדאי לעשות שימוש חוזר במכונות YTPlayerView שכבר נטענו, כשאפשר. אם צריך לשנות סרטון כלשהו בתצוגה, אין ליצור מכונה חדשה של UIView או מופע חדש של YTPlayerView, ואין לקרוא ל-loadVideoId: או ל-loadPlaylistId:. במקום זאת, צריך להשתמש במשפחת הפונקציות של cueVideoById:startSeconds:, שלא טוענים מחדש את ה-WebView. חל עיכוב משמעותי בטעינת כל נגן ה-IFrame.
  • הנגן הזה לא יכול להפעיל סרטונים פרטיים, אבל הוא יכול להפעיל סרטונים לא רשומים. מאחר שהספרייה הזו עוטפת את נגן ה-iframe הקיים, ההתנהגות של השחקן צריכה להיות כמעט זהה לזו של הנגן המוטמע בדף אינטרנט בדפדפן לנייד.

תכנים שהוספת

מאחר שמדובר בפרויקט בקוד פתוח, יש לשלוח תיקונים ושיפורים להזרוע הראשית של פרויקט GitHub .