Menyematkan Video YouTube di Aplikasi iOS dengan Koleksi Pemandu YouTube

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.storyboard
  • ViewController.h
  • ViewController.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:

  1. Buka project contoh di Xcode atau Finder.

  2. 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.

  3. 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:

  1. Tarik instance UIView ke Tampilan Anda.

  2. Pilih Identity Inspector dan ubah class tampilan ke YTPlayerView.

  3. Buka ViewController.h dan tambahkan header berikut:

    #import “YTPlayerView.h”

    Tambahkan juga properti berikut:

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

  4. Di Interface Builder, buat koneksi dari elemen View yang Anda tentukan pada langkah sebelumnya ke properti playerView Pengontrol View.

  5. 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.

Kontribusi

Karena ini adalah project open source, harap kirimkan perbaikan dan peningkatan pada cabang utama project GitHub .