Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Menyematkan Video YouTube di Aplikasi iOS dengan Library YouTube Helper

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 Aplikasi Tampilan Tunggal baru yang menargetkan iOS versi terbaru, dan Anda menambahkan file berikut saat membuat project:

Main.storyboard
ViewController.h
ViewController.m

Anda dapat menginstal library melalui CocoaPods atau dengan menyalin library dan file sumber dari halaman GitHub project.

Library ini dapat diinstal melalui CocoaPods. Atau, library dan file sumber tersedia melalui halaman GitHub project dan dapat disalin ke project yang ada.

Menginstal library melalui CocoaPods

Jika project Anda menggunakan CocoaPods, tambahkan baris di bawah 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"

Di prompt command line, ketik pod install untuk mengupdate ruang kerja Anda dengan dependensi.

Tips: Ingatlah 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 Anda 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, file ini tersedia di bagian Pods -> Development Pods -> YouTube-Player-iOS-Helper dan Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources. Di Finder, file ini tersedia di direktori root project dalam direktori Classes dan Assets.
Tarik file dan folder ini ke project Anda. Pastikan opsi Salin item ke folder grup tujuan dicentang. Saat menarik folder Aset, pastikan opsi Buat Referensi Folder untuk folder yang ditambahkan dicentang.

Sekarang library sudah diinstal.

Tambahkan `YTPlayerView` melalui Interface Builder atau Storyboard

Untuk menambahkan YTPlayerView melalui Interface Builder atau Storyboard:

Tarik instance UIView ke dalam View Anda.
Pilih Identity Inspector dan ubah class tampilan menjadi 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 di langkah sebelumnya ke properti playerView Pengontrol Tampilan Anda.
Sekarang buka ViewController.m dan tambahkan kode berikut ke akhir metode viewDidLoad Anda:
```
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];
```

Bangun dan jalankan aplikasi Anda. 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 pemutar tambahan ke tampilan. Variabel pemutar ini sesuai dengan parameter pemutar di IFrame Player API. Parameter playsinline memungkinkan video diputar langsung di tampilan, bukan diputar dalam layar penuh. Saat video diputar secara inline, aplikasi iOS yang memuatnya 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 View, beri label Play dan Stop. Buka ViewController.h dan tambahkan metode ini, yang akan dipetakan ke tombol:

- (IBAction)playVideo:(id)sender;
- (IBAction)stopVideo:(id)sender;

Sekarang buka ViewController.m dan tentukan kedua 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 sesuai dengan panduan coding Objective-C. Pengecualian penting adalah metode yang mengontrol volume video, karena dikontrol oleh hardware ponsel atau dengan instance UIView bawaan yang dirancang untuk tujuan ini, seperti MPVolumeView.

Buka storyboard atau Interface Builder, lalu tarik kontrol untuk menghubungkan tombol Play dan Stop ke metode playVideo: dan stopVideo:.

Sekarang, bangun dan jalankan aplikasi. Setelah thumbnail video dimuat, Anda akan 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 delegate.

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. Untuk mengupdate ViewController.m agar dapat menangani beberapa peristiwa, Anda harus menetapkan instance ViewController sebagai delegasi instance YTPlayerView terlebih dahulu. Untuk melakukan 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;
  }
}

Bangun dan jalankan aplikasi. Amati output log di Xcode saat status pemutar berubah. Anda akan melihat perubahan saat video diputar atau dihentikan.

Library ini menyediakan konstanta yang dimulai dengan awalan kYT* untuk kemudahan dan keterbacaan. Untuk daftar lengkap konstanta ini, lihat YTPlayerView.m.

Praktik terbaik dan batasan

Library ini dibangun di atas IFrame Player API dengan membuat WebView dan merender HTML dan JavaScript yang diperlukan untuk pemutar dasar. Tujuan library ini adalah agar semudah mungkin digunakan, dengan menggabungkan metode yang sering harus ditulis developer ke dalam paket. Ada beberapa batasan yang perlu diperhatikan:

Library tidak mendukung pemutaran video serentak di beberapa YTPlayerView instance. Jika aplikasi Anda memiliki beberapa instance YTPlayerView, praktik terbaik yang direkomendasikan adalah menjeda atau menghentikan pemutaran di instance yang ada sebelum memulai pemutaran di instance lain. Dalam aplikasi contoh yang disertakan dengan project, ViewController menggunakan NSNotificationCenter untuk mengirimkan notifikasi bahwa pemutaran akan dimulai. ViewController lain akan diberi tahu dan akan menjeda pemutaran di instance YTPlayerView masing-masing.
Gunakan kembali instance YTPlayerView yang sudah ada dan dimuat jika memungkinkan. Saat video perlu diubah dalam Tampilan, jangan buat instance UIView baru atau instance YTPlayerView baru, dan jangan panggil loadVideoId: atau loadPlaylistId:. Sebagai gantinya, gunakan keluarga fungsi cueVideoById:startSeconds:, yang tidak memuat ulang WebView. Terjadi penundaan yang terlihat saat memuat seluruh pemutar IFrame.
Pemutar ini tidak dapat memutar video pribadi, tetapi dapat memutar video tidak publik. Karena library ini membungkus pemutar iframe yang ada, perilaku pemutar harus hampir sama dengan perilaku pemutar yang disematkan di halaman web di browser seluler.

Kontribusi

Karena ini adalah project open source, kirimkan perbaikan dan peningkatan ke cabang master project GitHub.

Menyematkan Video YouTube di Aplikasi iOS dengan Library YouTube Helper Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.