הטמעה של סרטוני YouTube באפליקציות ל-iOS עם ספריית העזרה של YouTube
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
youtube-ios-player-helper היא ספריית קוד פתוח שעוזרת לך להטמיע
נגן iframe של YouTube באפליקציה ל-iOS. הספרייה יוצרת
WebView וגשר בין קוד המטרה-C של האפליקציה לבין
קוד JavaScript של נגן YouTube, ובכך מאפשרת לאפליקציה ל-iOS לשלוט
בנגן YouTube. במאמר הזה נתאר את השלבים להתקנת הספרייה ולהתחיל להשתמש בה באפליקציה שלך ל-iOS.
התקנה
ההנחה במאמר הזה מבוססת על ההנחה שיצרת פרויקט חדש ל-iOS ביישום אחד שמטרגט את הגרסה האחרונה של iOS, ושהוספת את הקבצים הבאים בזמן יצירת הפרויקט:
Main.storyboardViewController.hViewController.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 או לשכפל את המאגר. כשיהיה לכם עותק מקומי של הקוד, בצעו את הפעולות הבאות:
פותחים את הפרויקט לדוגמה ב-Xcode או ב-Finder.
בוחרים באפשרות YTPlayerView.h , YTPlayerView.m ובתיקייה
נכסים. אם פותחים את סביבת העבודה ב-Xcode, הם זמינים
בקטע Pods -> Development Pods -> YouTube-Player-iOS-Helper
ו-Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources. ב-Finder, הם זמינים בספריית הבסיס של הפרויקט בספריות Classs ו-Assets.
גוררים את הקבצים והתיקיות האלה לפרויקט. יש לוודא שהאפשרות העתקת פריטים לתיקייה של קבוצת היעד מסומנת. כשגוררים את תיקיית הנכסים, מוודאים שהאפשרות יצירת הפניות לתיקייה עבור כל התיקיות שנוספו מסומנת.
הספרייה אמורה להיות מותקנת כעת.
הוספת YTPlayerView באמצעות Builder Builder או לוח הסיפור
כדי להוסיף YTPlayerView באמצעות Builder Builder או לוח הסיפור:
-
גוררים מופע של UIView לתצוגה המפורטת.
-
בוחרים באפשרות 'בודק הזהויות' ומשנים את הסיווג של התצוגה המפורטת
ל-YTPlayerView.
-
פותחים את ViewController.h ומוסיפים את הכותרת הבאה:
#import “YTPlayerView.h”
יש להוסיף גם את המאפיין הבא:
@property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
-
בכלי ליצירת ממשק, יוצרים חיבור מהרכיב 'תצוגה' שהגדרתם
בשלב הקודם לנכס playerView של שלט רחוק לתצוגה.
-
עכשיו צריך לפתוח את 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 הקיים, ההתנהגות של השחקן צריכה להיות כמעט זהה לזו של הנגן המוטמע בדף אינטרנט בדפדפן לנייד.
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2023-02-22 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2023-02-22 (שעון UTC)."],[[["\u003cp\u003eThis library, \u003ccode\u003eyoutube-ios-player-helper\u003c/code\u003e, facilitates embedding a YouTube iframe player within an iOS application by creating a \u003ccode\u003eWebView\u003c/code\u003e and bridging Objective-C code with the player's JavaScript.\u003c/p\u003e\n"],["\u003cp\u003eInstallation is possible via CocoaPods by adding a specific line to the Podfile, or manually by downloading the source code from the project's GitHub page and dragging specific files into your iOS project.\u003c/p\u003e\n"],["\u003cp\u003eA \u003ccode\u003eYTPlayerView\u003c/code\u003e can be added through Interface Builder or Storyboard by dragging a \u003ccode\u003eUIView\u003c/code\u003e, changing its class to \u003ccode\u003eYTPlayerView\u003c/code\u003e, and connecting it to a \u003ccode\u003eplayerView\u003c/code\u003e property in the \u003ccode\u003eViewController.h\u003c/code\u003e file.\u003c/p\u003e\n"],["\u003cp\u003eThe library allows for controlling video playback, enabling inline play and manipulation using the IFrame Player API through Objective-C equivalent methods.\u003c/p\u003e\n"],["\u003cp\u003eThe library allows the handling of playback events, such as start and stop, through a delegate protocol, \u003ccode\u003eYTPlayerViewDelegate\u003c/code\u003e, where the \u003ccode\u003eViewController\u003c/code\u003e conforms to this protocol to capture those events.\u003c/p\u003e\n"]]],["The `youtube-ios-player-helper` library enables embedding and controlling a YouTube iframe player within an iOS app. Installation is via CocoaPods or manual file copying from GitHub. To use, a `YTPlayerView` is added to the storyboard, connected to a `ViewController`, and initialized with a video ID. Playback is controlled through Objective-C methods (e.g., `playVideo`, `stopVideo`) linked to UI elements. Developers can pass player variables, and the library supports delegate-based event handling for playback states. The library is based on the iFrame Player API and includes a few limitations.\n"],null,["# Embed YouTube Videos in iOS Applications with the YouTube Helper Library\n\nThe `youtube-ios-player-helper` is an open source library that helps you embed a\nYouTube iframe player into an iOS application. The library creates a\n`WebView` and a bridge between your application's Objective-C code and the\nYouTube player's JavaScript code, thereby allowing the iOS application to control the\nYouTube player. This article describes the steps to install the library and get started\nusing it from your iOS application.\n\nInstallation\n------------\n\nThis article assumes you have created a new Single View Application iOS project targeting\nthe latest version of iOS, and that you add the following files when creating the\nproject:\n\n- `Main.storyboard`\n- `ViewController.h`\n- `ViewController.m`\n\nYou can install the library via\n[CocoaPods](https://cocoapods.org/) or by copying the library\nand source files from the\n[project's GitHub page](https://github.com/youtube/youtube-ios-player-helper).\n\n- The library is available to install via CocoaPods. Alternatively, the library and source files are available via the project's GitHub page and can be copied into an existing project.\n\n### Install the library via CocoaPods\n\nIf your project uses CocoaPods, add the line below to your Podfile to install the library.\nIn that line, replace `x.y.z` with the latest pod version, which will be\nidentified on the project's GitHub page. \n\n```text\npod \"youtube-ios-player-helper\", \"~\u003e x.y.z\"\n```\n\nAt the command line prompt, type `pod install` to update your workspace with the\ndependencies.\n\nTip: Remember that when using CocoaPods, you must open the `.xcworkspace` file\nin Xcode, not the `.xcodeproj` file.\n\nCheck out the [CocoaPods\ntutorial](https://guides.cocoapods.org/using/getting-started.html) to learn more.\n\n### Manually install the library\n\nTo install the helper library manually, either download the source via\n[GitHub's download link](https://github.com/youtube/youtube-ios-player-helper) or\nclone the repository. Once you have a local copy of the code, follow these steps:\n\n1. Open the sample project in Xcode or Finder.\n\n2. Select `YTPlayerView.h`, `YTPlayerView.m`, and the\n **Assets** folder. If you open the workspace in Xcode, these are available\n under **Pods -\\\u003e Development Pods -\\\u003e YouTube-Player-iOS-Helper** and\n **Pods -\\\u003e Development Pods -\\\u003e YouTube-Player-iOS-Helper -\\\u003e Resources** . In the Finder,\n these are available in the project's root directory in the **Classes** and\n **Assets** directories.\n\n3. Drag these files and folders into your project. Make sure the **Copy items into\n destination group's folder** option is checked. When dragging the Assets folder, make\n sure that the **Create Folder References for any added folders** option is\n checked.\n\nThe library should now be installed.\n\nAdd a `YTPlayerView` via Interface Builder or the Storyboard\n------------------------------------------------------------\n\nTo add a `YTPlayerView` via Interface Builder or the Storyboard:\n\n1. Drag a `UIView` instance onto your View.\n\n2. Select the Identity Inspector and change the class of the view to\n `YTPlayerView`.\n\n3. Open `ViewController.h` and add the following header:\n\n ```objective-c\n #import \"YTPlayerView.h\"\n ```\n\n Also add the following property: \n\n ```objective-c\n @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;\n ```\n4. In Interface Builder, create a connection from the View element that you defined in the\n previous step to your View Controller's `playerView` property.\n\n5. Now open `ViewController.m` and add the following code to the end of your\n `viewDidLoad` method:\n\n ```objective-c\n [self.playerView loadWithVideoId:@\"M7lc1UVf-VE\"];\n ```\n\nBuild and run your application. When the video thumbnail loads, tap the video thumbnail to\nlaunch the fullscreen video player.\n\nControl video playback\n----------------------\n\nThe `ViewController::loadWithVideoId:` method has a variant,\n`loadWithVideoId:playerVars:`, that allows developers to pass additional player\nvariables to the view. These player variables correspond to the\n[player parameters in the\nIFrame Player API](https://developers.google.com/youtube/player_parameters). The `playsinline` parameter enables the video to play\ndirectly in the view rather than playing fullscreen. When a video is playing inline, the\ncontaining iOS application can programmatically control playback.\n\nReplace the `loadWithVideoId:` call with this code: \n\n```objective-c\nNSDictionary *playerVars = @{\n @\"playsinline\" : @1,\n};\n[self.playerView loadWithVideoId:@\"M7lc1UVf-VE\" playerVars:playerVars];\n```\n\nOpen up the storyboard or Interface Builder. Drag two buttons onto your View, labeling them\n**Play** and **Stop** . Open `ViewController.h` and add these methods, which\nwill be mapped to the buttons: \n\n```objective-c\n- (IBAction)playVideo:(id)sender;\n- (IBAction)stopVideo:(id)sender;\n```\n\nNow open `ViewController.m` and define these two functions: \n\n```objective-c\n- (IBAction)playVideo:(id)sender {\n [self.playerView playVideo];\n}\n\n- (IBAction)stopVideo:(id)sender {\n [self.playerView stopVideo];\n}\n```\n\nMost of the IFrame Player API functions have Objective-C equivalents, though some of the\nnaming may differ slightly to more closely match Objective-C coding guidelines. Notable\nexceptions are methods controlling the volume of the video, since these are controlled by\nthe phone hardware or with built in `UIView` instances designed for this purpose,\nsuch as [`MPVolumeView`](https://developer.apple.com/library/ios/documentation/mediaplayer/reference/MPVolumeView_Class/Reference/Reference.html).\n\nOpen your storyboard or Interface Builder and control-drag to connect the **Play** and\n**Stop** buttons to the `playVideo:` and `stopVideo:` methods.\n\nNow build and run the application. Once the video thumbnail loads, you should be able to\nplay and stop the video using native controls in addition to the player controls.\n\nHandle player callbacks\n-----------------------\n\nIt can be useful to programmatically handle playback events, such as playback state changes\nand playback errors. In the JavaScript API, this is done with\n[event listeners](https://developers.google.com/youtube/iframe_api_reference#Adding_event_listener).\nIn Objective-C,this is done with a\n[delegate](https://developer.apple.com/library/ios/documentation/general/conceptual/CocoaEncyclopedia/DelegatesandDataSources/DelegatesandDataSources.html).\n\n\nThe following code shows how to update the interface declaration in\n`ViewController.h` so the class conforms to the delegate protocol. Change\n`ViewController.h`'s interface declaration as follows: \n\n```objective-c\n@interface ViewController : UIViewController\u003cYTPlayerViewDelegate\u003e\n```\n\n`YTPlayerViewDelegate` is a protocol for handling playback events in the player.\nTo update `ViewController.m` to handle some of the events, you first need to set\nthe `ViewController` instance as the delegate of the `YTPlayerView`\ninstance. To make this change, add the following line to the `viewDidLoad` method\nin `ViewController.h`. \n\n```objective-c\nself.playerView.delegate = self;\n```\n\nNow add the following method to `ViewController.m`: \n\n```objective-c\n- (void)playerView:(YTPlayerView *)playerView didChangeToState:(YTPlayerState)state {\n switch (state) {\n case kYTPlayerStatePlaying:\n NSLog(@\"Started playback\");\n break;\n case kYTPlayerStatePaused:\n NSLog(@\"Paused playback\");\n break;\n default:\n break;\n }\n}\n```\n\nBuild and run the application. Watch the log output in Xcode as the player state changes.\nYou should see updates when the video is played or stopped.\n\nThe library provides the constants that begin with the `kYT*` prefix for\nconvenience and readability. For a full list of these constants, look at\n`YTPlayerView.m`.\n\nBest practices and limitations\n------------------------------\n\nThe library builds on top of the IFrame Player API by creating a `WebView` and\nrendering the HTML and JavaScript required for a basic player. The library's goal is to be\nas easy-to-use as possible, bundling methods that developers frequently have to write into a\npackage. There are a few limitations that should be noted:\n\n- The library does not support concurrent video playback in multiple `YTPlayerView` instances. If your application has multiple `YTPlayerView` instances, a recommended best practice is to pause or stop playback in any existing instances before starting playback in a different instance. In the example application that ships with the project, the ViewControllers make use of `NSNotificationCenter` to dispatch notifications that playback is about to begin. Other ViewControllers are notified and will pause playback in their `YTPlayerView` instances.\n- Reuse your existing, loaded `YTPlayerView` instances when possible. When a video needs to be changed in a View, don't create a new `UIView` instance or a new `YTPlayerView` instance, and don't call either `loadVideoId:` or `loadPlaylistId:`. Instead, use the `cueVideoById:startSeconds:` family of functions, which do not reload the `WebView`. There is a noticeable delay when loading the entire IFrame player.\n- This player cannot play private videos, but it can play [unlisted videos](https://support.google.com/youtube/answer/157177). Since this library wraps the existing iframe player, the player's behavior should be nearly identical to that of a player embedded on a webpage in a mobile browser.\n\nContributions\n-------------\n\nSince this is an open-source project, please submit fixes and improvements to the\n[master branch of the GitHub\nproject](https://github.com/youtube/youtube-ios-player-helper)."]]
