YouTube Yardımcı Kitaplığı ile YouTube Videolarını iOS Uygulamalarına Yerleştirme

youtube-ios-player-helper, bir YouTube iframe oynatıcıyı iOS uygulamasına yerleştirmenize yardımcı olan bir açık kaynak kitaplığıdır. Kitaplık, uygulamanızın Object-C kodu ile YouTube oynatıcısının JavaScript kodu arasında bir WebView ve köprü oluşturur. Böylece iOS uygulamasının YouTube oynatıcısını kontrol etmesi sağlanır. Bu makalede, kitaplığı yükleme ve iOS uygulamanızdan kullanmaya başlama adımları açıklanmaktadır.

Kurulum

Bu makalede, iOS'in en son sürümünü hedefleyen yeni bir Tek Görüntüleme Uygulaması iOS projesi oluşturduğunuz ve projeyi oluştururken aşağıdaki dosyaları eklediğiniz varsayılmaktadır:

  • Main.storyboard
  • ViewController.h
  • ViewController.m

Kitaplığı, CocoaPods aracılığıyla veya projenin GitHub sayfasındaki kitaplık ve kaynak dosyalarını kopyalayarak yükleyebilirsiniz.

  • Kitaplık, CocoaPods üzerinden yüklenebilir. Kitaplık ve kaynak dosyaları, projenin GitHub sayfasından da mevcuttur ve mevcut bir projeye kopyalanabilir.

Kitaplığı CocoaPods üzerinden yükleme

Projeniz CocoaPods kullanıyorsa kitaplığı yüklemek için aşağıdaki satırı Podfile dosyanıza ekleyin. Bu satırda x.y.z değerini, projenin GitHub sayfasında tanımlanan en son kapsül sürümüyle değiştirin.

pod "youtube-ios-player-helper", "~> x.y.z"

Çalışma alanınızı bağımlılıklarla güncellemek için komut satırı isteminde pod install yazın.

İpucu: CocoaPods kullanırken .xcworkspace dosyasını .xcodeproj dosyası yerine Xcode'da açmanız gerekir.

Daha fazla bilgi için CocoaPods eğitimine göz atın.

Kitaplığı manuel olarak yükleme

Yardımcı kitaplığı manuel olarak yüklemek için kaynağı GitHub'ın indirme bağlantısı aracılığıyla indirin veya depoyu klonlayın. Kodun yerel bir kopyasına sahip olduğunuzda aşağıdaki adımları uygulayın:

  1. Xcode veya Finder'da örnek projeyi açın.

  2. YTPlayerView.h, YTPlayerView.m ve Öğeler klasörünü seçin. Çalışma alanını Xcode'da açarsanız bunları Pods -> Geliştirme Kapsülleri -> YouTube-Player-iOS-Yardımcısı ve Pods -> Geliştirme Kapsülleri -> YouTube-Player-iOS-Yardımcı -> Kaynaklar bölümlerinde bulabilirsiniz. Finder'da, bunlar Sınıflar ve Öğeler dizinlerinde projenin kök dizininde bulunur.

  3. Bu dosya ve klasörleri projenize sürükleyin. Öğeleri hedef grubun klasörüne kopyala seçeneğinin işaretli olduğundan emin olun. Öğeler klasörünü sürüklerken Eklenen klasörler için Klasör Referansları oluşturun seçeneğinin işaretli olduğundan emin olun.

Kitaplık artık yüklenmiş olmalıdır.

Arayüz Oluşturucu veya Resimli Taslak aracılığıyla YTPlayerView ekleyin

Arayüz Oluşturucu veya Resimli Taslak üzerinden YTPlayerView eklemek için:

  1. Görünümünüze bir UIView örneği sürükleyin.

  2. Kimlik İnceleyici'yi seçin ve görünümü YTPlayerView olarak değiştirin.

  3. ViewController.h öğesini açın ve aşağıdaki üstbilgiyi ekleyin:

    #import “YTPlayerView.h”

    Ayrıca, aşağıdaki özelliği ekleyin:

    @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
  4. Arayüz Oluşturucu'da, önceki adımda görüntülediğiniz Görünüm öğesinden, Görünüm Denetleyicinizin playerView mülküne bir bağlantı oluşturun.

  5. Şimdi ViewController.m uygulamasını açıp aşağıdaki kodu viewDidLoad yönteminizin sonuna ekleyin:

    [self.playerView loadWithVideoId:@"M7lc1UVf-VE"];

Uygulamanızı oluşturup çalıştırın. Video küçük resmi yüklendiğinde, tam ekran video oynatıcıyı başlatmak için video küçük resmine dokunun.

Video oynatmayı kontrol etme

ViewController::loadWithVideoId: yönteminin, geliştiricilerin görünüme ek oyuncu değişkenleri iletmesini sağlayan bir varyant (loadWithVideoId:playerVars:) vardır. Bu oynatıcı değişkenleri, IFrame Player API'sindeki oynatıcı parametrelerine karşılık gelir. playsinline parametresi, videonun tam ekranda oynatılması yerine doğrudan görünümde oynatılmasını sağlar. Bir video satır içinde oynatılırken videoyu içeren uygulama, oynatmayı programatik olarak kontrol edebilir.

loadWithVideoId: çağrısını bu kodla değiştirin:

NSDictionary *playerVars = @{
  @"playsinline" : @1,
};
[self.playerView loadWithVideoId:@"M7lc1UVf-VE" playerVars:playerVars];

Resimli taslakı veya Arayüz Oluşturucu'yu açın. İki düğmeyi Görünümünüze sürükleyerek Oynat ve Durdur şeklinde etiketleyin. ViewController.h öğesini açın ve düğmelerle eşlenecek aşağıdaki yöntemleri ekleyin:

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

Şimdi ViewController.m öğesini açın ve şu iki işlevi tanımlayın:

- (IBAction)playVideo:(id)sender {
  [self.playerView playVideo];
}

- (IBAction)stopVideo:(id)sender {
  [self.playerView stopVideo];
}

IFrame Player API'nin işlevlerinin çoğunda Object-C eşdeğerleri olsa da adlandırmadan bazıları Objective-C kodlama yönergeleriyle daha yakından eşleşecek şekilde farklılık gösterebilir. Telefon donanımı tarafından veya bu amaç için tasarlanmış yerleşik UIView örneklerinde (MPVolumeView gibi) kontrol edildiği için videonun hacmini kontrol eden yöntemler istisnadır.

Resimli taslakınızı veya Arayüz Oluşturucu'nuzu açın ve Oynat ile Durdur düğmelerini playVideo: ve stopVideo: yöntemlerine bağlamak için sürükleyin.

Şimdi uygulamayı derleyip çalıştırın. Video küçük resmi yüklendiğinde, oynatıcı kontrollerine ek olarak yerel kontrolleri kullanarak videoyu oynatabilmeniz ve durdurabilmeniz gerekir.

Oyuncu geri çağırmalarını işleme

Oynatma durumu değişiklikleri ve oynatma hataları gibi oynatma etkinliklerini programatik olarak yönetmek faydalı olabilir. JavaScript API'sinde bu işlem etkinlik işleyicilerle yapılır. Objective-C'de bu bir yetki ile yapılır.

Aşağıdaki kod, sınıfın yetki verilen protokole uygun olması için ViewController.h'deki arayüz beyanının nasıl güncelleneceğini gösterir. ViewController.h arayüzü beyanını aşağıdaki gibi değiştirin:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate, oynatıcıdaki oynatma etkinliklerinin işlenmesine yönelik bir protokoldür. Bazı etkinlikleri işlemek için ViewController.m uygulamasını güncellemek üzere ilk olarak ViewController örneğini YTPlayerView örneğinin yetkilisi olarak ayarlamanız gerekir. Bu değişikliği yapmak için aşağıdaki satırı ViewController.h içinde viewDidLoad yöntemine ekleyin.

self.playerView.delegate = self;

Şimdi ViewController.m yöntemini şu yöntemi ekleyin:

- (void)playerView:(YTPlayerView *)playerView didChangeToState:(YTPlayerState)state {
  switch (state) {
    case kYTPlayerStatePlaying:
      NSLog(@"Started playback");
      break;
    case kYTPlayerStatePaused:
      NSLog(@"Paused playback");
      break;
    default:
      break;
  }
}

Uygulamayı oluşturun ve çalıştırın. Oynatıcı durumu değiştikçe Xcode'daki günlük çıkışını izleyin. Video oynatıldığında veya durdurulduğunda güncellemeleri görürsünüz.

Kitaplık, kolaylık ve okunabilirlik için kYT* ön ekiyle başlayan sabit değerler sağlar. Bu sabitlerin tam listesi için YTPlayerView.m sayfasına bakın.

En iyi uygulamalar ve sınırlamalar

Kitaplık, WebView çerçevesi oluşturup temel oynatıcı için gereken HTML ve JavaScript'i oluşturarak IFrame Player API'sinin üzerine inşa edilir. Kitaplığın hedefi, geliştiricilerin bir pakete sık sık yazması gereken, mümkün olduğunca kolay kullanılan bir yöntemdir. Dikkat edilmesi gereken birkaç sınırlama var:

  • Kitaplık, birden fazla YTPlayerView örneğinde aynı anda video oynatmayı desteklemez. Uygulamanızda birden fazla YTPlayerView örneği varsa farklı bir örnekte oynatmaya başlamadan önce mevcut örneklerin oynatılmasını duraklatmak veya durdurmak önerilir. Projeyle birlikte gönderilen örnek uygulamada ViewController'lar, oynatmanın başlayacağına dair bildirimleri göndermek için NSNotificationCenter kullanır. Diğer ViewController kullanıcılara bildirilir ve YTPlayerView örneklerinde oynatmayı duraklatır.
  • Mümkün olduğunda mevcut YTPlayerView yüklü örneklerinizi yeniden kullanın. Görünümde bir videonun değiştirilmesi gerektiğinde yeni bir UIView örneği veya yeni bir YTPlayerView örneği oluşturmayın ve loadVideoId: ya da loadPlaylistId: çağrısı yapmayın. Bunun yerine, WebView öğesini yeniden yüklemeyen cueVideoById:startSeconds: işlev ailesini kullanın. IFrame oynatıcısının tamamı yüklenirken önemli bir gecikme olur.
  • Bu oynatıcı özel video oynatamaz ancak liste dışı videoları oynatabilir. Bu kitaplık, mevcut iframe oynatıcıyı sarmaladığından oynatıcının davranışı, mobil tarayıcıda web sayfasına yerleştirilmiş bir oynatıcıyla hemen hemen aynı olmalıdır.

Katkılar

Bu bir açık kaynak projesi olduğundan lütfen GitHub projesinin ana şubesine düzeltmeleri ve iyileştirmeleri gönderin.