Menyematkan Video YouTube di Aplikasi iOS dengan Koleksi Pemandu YouTube
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
youtube-ios-player-helper adalah library open source yang membantu Anda menyematkan
pemutar iframe YouTube ke dalam aplikasi iOS. Library ini membuat
WebView dan jembatan antara kode Objective-C aplikasi Anda dan
kode JavaScript pemutar YouTube, sehingga memungkinkan aplikasi iOS mengontrol
pemutar YouTube. Artikel ini menjelaskan langkah-langkah untuk menginstal library dan mulai menggunakannya dari aplikasi iOS Anda.
Penginstalan
Artikel ini mengasumsikan bahwa Anda telah membuat project iOS Single View Application baru yang menargetkan versi terbaru iOS, dan bahwa Anda menambahkan file berikut saat membuat project:
Main.storyboardViewController.hViewController.m
Anda dapat menginstal library melalui CocoaPods atau dengan menyalin file library dan sumber dari halaman GitHub project.
- Library tersedia untuk diinstal melalui CocoaPods. Atau, library dan file sumber tersedia melalui halaman GitHub project dan dapat disalin ke project yang ada.
Instal library melalui CocoaPods
Jika project Anda menggunakan CocoaPods, tambahkan baris di bawah ini ke Podfile Anda untuk menginstal library.
Pada baris tersebut, ganti x.y.z dengan versi pod terbaru, yang akan diidentifikasi di halaman GitHub project.
pod "youtube-ios-player-helper", "~> x.y.z"
Pada prompt command line, ketik pod install untuk memperbarui ruang kerja dengan dependensi.
Tips: Ingat bahwa saat menggunakan CocoaPods, Anda harus membuka file .xcworkspace di Xcode, bukan file .xcodeproj.
Lihat tutorial CocoaPods untuk mempelajari lebih lanjut.
Menginstal library secara manual
Untuk menginstal library helper secara manual, download sumber melalui link download GitHub atau clone repositori. Setelah memiliki salinan lokal kode, ikuti langkah-langkah berikut:
Buka project contoh di Xcode atau Finder.
Pilih YTPlayerView.h, YTPlayerView.m, dan
folder Assets. Jika Anda membuka ruang kerja di Xcode, ini tersedia di Pods -> Development Pods -> YouTube-Player-iOS-Helper dan Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resource. Di Finder,
keduanya tersedia dalam direktori utama project di direktori Classes dan
Assets.
Tarik file dan folder ini ke project Anda. Pastikan opsi Salin item ke dalam folder grup tujuan dicentang. Saat menarik folder Aset, pastikan
opsi Buat Referensi Folder untuk folder yang ditambahkan
dicentang.
Library sekarang seharusnya sudah diinstal.
Menambahkan YTPlayerView melalui Interface Builder atau Storyboard
Untuk menambahkan YTPlayerView melalui Interface Builder atau Storyboard:
-
Tarik instance UIView ke Tampilan Anda.
-
Pilih Identity Inspector dan ubah class tampilan ke
YTPlayerView.
-
Buka ViewController.h dan tambahkan header berikut:
#import “YTPlayerView.h”
Tambahkan juga properti berikut:
@property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
-
Di Interface Builder, buat koneksi dari elemen View yang Anda tentukan pada langkah sebelumnya ke properti playerView Pengontrol View.
-
Sekarang buka ViewController.m dan tambahkan kode berikut ke akhir metode
viewDidLoad Anda:
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];
Build dan jalankan aplikasi. Saat thumbnail video dimuat, ketuk thumbnail video untuk
meluncurkan pemutar video layar penuh.
Mengontrol pemutaran video
Metode ViewController::loadWithVideoId: memiliki varian,
loadWithVideoId:playerVars:, yang memungkinkan developer meneruskan variabel
pemain tambahan ke tampilan. Variabel pemutar ini sesuai dengan
parameter pemain di
IFrame Player API. Parameter playsinline memungkinkan video diputar
secara langsung di tampilan, bukan diputar dalam layar penuh. Saat video diputar secara inline, aplikasi
yang berisi iOS dapat mengontrol pemutaran secara terprogram.
Ganti panggilan loadWithVideoId: dengan kode ini:
NSDictionary *playerVars = @{
@"playsinline" : @1,
};
[self.playerView loadWithVideoId:@"M7lc1UVf-VE" playerVars:playerVars];
Buka storyboard atau Interface Builder. Tarik dua tombol ke Tampilan, beri label
Putar dan Berhenti. Buka ViewController.h dan tambahkan metode berikut, yang akan dipetakan ke tombol:
- (IBAction)playVideo:(id)sender;
- (IBAction)stopVideo:(id)sender;
Sekarang buka ViewController.m dan tentukan dua fungsi ini:
- (IBAction)playVideo:(id)sender {
[self.playerView playVideo];
}
- (IBAction)stopVideo:(id)sender {
[self.playerView stopVideo];
}
Sebagian besar fungsi IFrame Player API memiliki padanan Objective-C, meskipun beberapa penamaan mungkin sedikit berbeda agar lebih cocok dengan pedoman coding Objective-C. Pengecualian
penting adalah metode yang mengontrol volume video, karena metode ini dikontrol oleh
hardware ponsel atau dengan instance UIView bawaan yang dirancang untuk tujuan ini,
seperti MPVolumeView.
Buka storyboard atau Interface Builder dan control-tarik untuk menghubungkan tombol Play dan
Stop ke metode playVideo: dan stopVideo:.
Sekarang, build dan jalankan aplikasi. Setelah thumbnail video dimuat, Anda dapat memutar dan menghentikan video menggunakan kontrol native selain kontrol pemutar.
Menangani callback pemain
Menangani peristiwa pemutaran secara terprogram, seperti perubahan status pemutaran, dan error pemutaran dapat berguna. Di JavaScript API, hal ini dilakukan dengan pemroses peristiwa.
Di Objective-C,hal ini dilakukan dengan delegasi.
Kode berikut menunjukkan cara memperbarui deklarasi antarmuka di
ViewController.h sehingga class sesuai dengan protokol delegasi. Ubah
deklarasi antarmuka ViewController.h sebagai berikut:
@interface ViewController : UIViewController<YTPlayerViewDelegate>
YTPlayerViewDelegate adalah protokol untuk menangani peristiwa pemutaran di pemutar.
Guna mengupdate ViewController.m untuk menangani beberapa peristiwa, Anda harus menetapkan instance ViewController terlebih dahulu sebagai delegasi instance YTPlayerView. Untuk membuat perubahan ini, tambahkan baris berikut ke metode viewDidLoad
di ViewController.h.
self.playerView.delegate = self;
Sekarang, tambahkan metode berikut ke 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;
}
}
Build dan jalankan aplikasi. Lihat output log di Xcode saat status pemutar berubah.
Anda akan melihat update saat video diputar atau dihentikan.
Library ini menyediakan konstanta yang dimulai dengan awalan kYT* untuk memudahkan dan keterbacaan. Untuk mengetahui daftar lengkap konstanta ini, lihat
YTPlayerView.m.
Praktik terbaik dan batasan
Library ini dibuat berdasarkan IFrame Player API dengan membuat WebView dan merender HTML serta JavaScript yang diperlukan untuk pemutar dasar. Tujuan library ini adalah
agar mudah digunakan, sehingga memerlukan metode pemaketan yang sering ditulis developer ke dalam
paket. Ada beberapa batasan yang harus diperhatikan:
- Library tidak mendukung pemutaran video serentak di beberapa
instance
YTPlayerView. Jika aplikasi Anda memiliki beberapa instance YTPlayerView, praktik terbaik yang direkomendasikan adalah menjeda atau menghentikan pemutaran dalam instance yang ada sebelum memulai pemutaran dalam instance lain. Dalam
contoh aplikasi yang disertakan bersama project, ViewController menggunakan NSNotificationCenter untuk mengirim notifikasi bahwa pemutaran akan dimulai. ViewController lainnya diberi tahu dan akan menjeda pemutaran dalam instance YTPlayerView-nya.
- Gunakan kembali instance
YTPlayerView yang ada dan dimuat jika memungkinkan. Saat
video perlu diubah dalam Tampilan, jangan buat instance UIView baru atau
instance YTPlayerView baru, dan jangan memanggil loadVideoId: atau
loadPlaylistId:. Sebagai gantinya, gunakan
kelompok fungsi cueVideoById:startSeconds:, yang tidak
memuat ulang WebView. Ada penundaan yang terlihat saat memuat seluruh pemutar IFrame.
- Pemutar ini tidak dapat memutar video pribadi, tetapi dapat memutar
video yang tidak tercantum. Karena library ini menggabungkan pemutar iframe yang ada, perilaku pemutar akan hampir identik dengan pemutar yang disematkan di halaman web di browser seluler.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2023-02-22 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 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)."]]
