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

youtube-ios-player-helper, iOS uygulamalarına YouTube iframe oynatıcı yerleştirmenize yardımcı olan açık kaynaklı bir kitaplıktır. Kitaplık, uygulamanızın Objective-C kodu ile YouTube oynatıcının JavaScript kodu arasında bir WebView ve köprü oluşturur. Böylece iOS uygulamasının YouTube oynatıcıyı kontrol etmesine olanak tanır. Bu makalede, kitaplığın nasıl yükleneceği ve iOS uygulamanızda nasıl kullanılmaya başlanacağı açıklanmaktadır.

Kurulum

Bu makalede, iOS'in en yeni sürümünü hedefleyen yeni bir Tek Görünüm 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 kitaplığı ve kaynak dosyaları projenin GitHub sayfasından kopyalayarak yükleyebilirsiniz.

  • Kitaplık, CocoaPods aracılığıyla yüklenebilir. Alternatif olarak, kitaplık ve kaynak dosyaları projenin GitHub sayfasında mevcuttur ve mevcut bir projeye kopyalanabilir.

Kitaplığı CocoaPods aracılığıyla yükleme

Projenizde CocoaPods kullanılıyorsa kitaplığı yüklemek için aşağıdaki satırı Podfile'ınıza ekleyin. Bu satırda, x.y.z ifadesini projenin GitHub sayfasında belirtilen en son pod 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ı istemine pod install yazın.

İpucu: CocoaPods'u kullanırken .xcodeproj dosyasını değil, .xcworkspace dosyasını Xcode'da açmanız gerektiğini unutmayın.

Daha fazla bilgi edinmek 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ı üzerinden indirin veya depoyu klonlayın. Kodun yerel bir kopyasını aldıktan sonra aşağıdaki adımları uygulayın:

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

  2. YTPlayerView.h, YTPlayerView.m ve Öğeler klasörünü seçin. Çalışma alanını Xcode'da açarsanız bu dosyaları Pods -> Development Pods -> YouTube-Player-iOS-Helper ve Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources altında bulabilirsiniz. Finder'da bunlar, projenin kök dizinindeki Classes ve Assets dizinlerinde 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ştur seçeneğinin işaretli olduğundan emin olun.

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

Interface Builder veya Storyboard aracılığıyla YTPlayerView ekleme

Interface Builder veya Storyboard aracılığıyla YTPlayerView eklemek için:

  1. Bir UIView örneğini görünümünüze sürükleyin.

  2. Identity Inspector'ı seçin ve görünümün sınıfını YTPlayerView olarak değiştirin.

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

    #import “YTPlayerView.h”

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

    @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
  4. Interface Builder'da, önceki adımda tanımladığınız View öğesinden View Controller'ınızın playerView özelliğine bir bağlantı oluşturun.

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

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

Uygulamanızı derleyip ç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 oynatıcı değişkenleri iletmesine olanak tanıyan loadWithVideoId:playerVars: adlı bir varyantı vardır. Bu oynatıcı değişkenleri, IFrame Player API'deki oynatıcı parametrelerine karşılık gelir. playsinline parametresi, videonun tam ekran oynatılması yerine doğrudan görünümde oynatılmasını sağlar. Satır içi oynatılan videolarda, iOS'i içeren uygulama, oynatmayı programatik olarak kontrol edebilir.

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

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

Görsel taslak veya Interface Builder'ı açın. Görünümünüze iki düğme sürükleyin ve bunları Oynat ve Durdur olarak etiketleyin. ViewController.h dosyasını açın ve düğmelere eşlenecek şu yöntemleri ekleyin:

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

Şimdi ViewController.m simgesini 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 işlevlerinin çoğunun Objective-C karşılığı vardır. Ancak adlandırma, Objective-C kodlama kurallarına daha yakın olacak şekilde biraz farklılık gösterebilir. Videonun ses düzeyini kontrol eden yöntemler, telefon donanımı veya bu amaç için tasarlanmış yerleşik UIView örnekleri (ör. MPVolumeView) tarafından kontrol edildiğinden dikkate değer istisnalardır.

Film şeridinizi veya Interface Builder'ı açın ve Play ve Stop düğmelerini playVideo: ve stopVideo: yöntemlerine bağlamak için kontrol tuşuna basarak sürükleyin.

Şimdi uygulamayı oluşturun ve çalıştırın. Video küçük resmi yüklendikten sonra, oynatıcı kontrollerinin yanı sıra yerel kontrolleri kullanarak videoyu oynatıp durdurabilirsiniz.

Oynatıcı geri çağırmalarını işleme

Oynatma durumu değişiklikleri ve oynatma hataları gibi oynatma etkinliklerini programatik olarak işlemek faydalı olabilir. JavaScript API'de bu işlem etkinlik işleyicileri ile yapılır. Objective-C'de bu işlem delegate ile yapılır.

Aşağıdaki kodda, sınıfın temsilci protokolüne uyması için ViewController.h dosyasındaki arayüz bildiriminin nasıl güncelleneceği gösterilmektedir. Aşağıdaki şekilde ViewController.h'nın arayüz beyanını değiştirin:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate, oynatıcıdaki oynatma etkinliklerini işlemek için kullanılan bir protokoldür. ViewController.m öğesini bazı etkinlikleri işleyecek şekilde güncellemek için önce ViewController örneğini YTPlayerView örneğinin temsilcisi olarak ayarlamanız gerekir. Bu değişikliği yapmak için ViewController.h içindeki viewDidLoad yöntemine aşağıdaki satırı ekleyin.

self.playerView.delegate = self;

Şimdi ViewController.m dosyasına aşağıdaki 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ı derleyip ç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 sabitler sağlar. Bu sabitlerin tam listesi için YTPlayerView.m sayfasına bakın.

En iyi uygulamalar ve sınırlamalar

Kitaplık, bir WebView oluşturarak ve temel bir oynatıcı için gereken HTML ve JavaScript'i oluşturarak IFrame Player API'yi temel alır. Kitaplığın amacı, geliştiricilerin sık sık yazması gereken yöntemleri bir pakette toplayarak mümkün olduğunca kolay kullanılabilir hale getirmektir. Dikkat edilmesi gereken birkaç sınırlama vardır:

  • Kitaplık, birden fazla YTPlayerView örneğinde eşzamanlı video oynatmayı desteklemez. Uygulamanızın birden fazla YTPlayerView örneği varsa farklı bir örnekte oynatmaya başlamadan önce mevcut örneklerde oynatmayı duraklatmanız veya durdurmanız önerilir. Proje ile birlikte gönderilen örnek uygulamada ViewControllers, oynatmanın başlamak üzere olduğunu bildirmek için NSNotificationCenter kullanır. Diğer ViewController'lar bilgilendirilir ve YTPlayerView örneklerinde oynatmayı duraklatır.
  • Mümkün olduğunda mevcut, yüklenmiş YTPlayerView örneklerinizi yeniden kullanın. Bir görünümde video 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ğırmayın. Bunun yerine, WebView öğesini yeniden yüklemeyen cueVideoById:startSeconds: işlev ailesini kullanın. IFrame oynatıcının tamamı yüklenirken belirgin bir gecikme yaşanıyor.
  • Bu oynatıcı, gizli videoları oynatamaz ancak liste dışı videoları oynatabilir. Bu kitaplık mevcut iFrame oynatıcıyı sardığından oynatıcının davranışı, mobil tarayıcıda bir web sayfasına yerleştirilmiş oynatıcının davranışıyla neredeyse aynı olmalıdır.

Katkılar

Bu açık kaynaklı bir proje olduğundan lütfen düzeltmeleri ve iyileştirmeleri GitHub projesinin ana dalına gönderin.