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.storyboardViewController.hViewController.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:
Örnek projeyi Xcode veya Finder'da açın.
YTPlayerView.h,YTPlayerView.mve Öğ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.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:
-
Bir
UIViewörneğini görünümünüze sürükleyin. -
Identity Inspector'ı seçin ve görünümün sınıfını
YTPlayerViewolarak değiştirin. -
ViewController.hdosyası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;
-
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. -
Şimdi
ViewController.mdosyasını açın veviewDidLoadyö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 fazlaYTPlayerViewö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çinNSNotificationCenterkullanır. Diğer ViewController'lar bilgilendirilir veYTPlayerViewö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 birUIViewörneği veya yeni birYTPlayerViewörneği oluşturmayın veloadVideoId:ya daloadPlaylistId:'ü çağırmayın. Bunun yerine,WebViewöğesini yeniden yüklemeyencueVideoById: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.