Bir web sayfasına medya eklemenin birkaç yolu vardır. Daha önce standart <video> etiketinin nasıl kullanılacağını öğrendiniz. Bu makalede, varsayılan HTML5 video oynatıcının davranışını genişletmek veya değiştirmek için kullanabileceğiniz medya çerçeveleri (veya kitaplıklar) hakkında bilgi edineceksiniz.
Medya çerçeveleri hem özel hem de açık kaynak çeşitlerine sahiptir. Temel olarak çeşitli container biçimleri ve iletim protokolleri için ses ve/veya video oynatmayı destekleyen bir API grubu bulunur. İyi bir çerçeve, modüler bir mimariye sahiptir ve açık ve ayrıntılı belgeler sunar. İdeal olan, kurulumunun ve kullanımının da nispeten kolay olmasıdır. Kendinize, "HTML5 video oynatıcı halihazırda birçok özelliği sağlıyorsa neden bir çerçeve veya kitaplık kullanayım?" diye soruyor olabilirsiniz. Çok güzel bir soru. Hemen başlayalım.
Çerçeve kullanmanın avantajları
Basit bir web sayfasının ihtiyaçlarının dışında kalan çoğu durumda, içeriğinizi sunmak için bir medya çerçevesi kullanmak istersiniz. Çevrimdışı oynatma, akış, analiz, pencere içinde pencere, önizleme küçük resimleri, yerleştirme ve doluluk oranı optimizasyonu, reklam zaman planlaması veya başlıktan teklif alma (header bidding) gibi para kazanma yöntemleri gibi zengin özellikleri geliştirip kullanmaya hazır değilseniz muhtemelen bu karmaşıklığı mevcut bir çözüme yüklemeniz gerekir.
Medya çerçeveleri burada devreye girer. Bu araçlar, size bir dizi özellik ve bu özellikleri kullanabileceğiniz koşullar sunar. Sonra sizin projeniz için hangi çerçevenin doğru olduğuna karar vermeniz gerekir. Bir sonraki makalede, birkaç karmaşık özelliği uygulayan çevrimdışı akışlı PWA'yı nasıl geliştirdiğimizi ele alacağız. Bu, çok fazla işti ve hâlâ üretime hazır bir çözüm olmaktan çok uzak. Kendinizi bu sıkıntıdan kurtarın ve bir çerçeve kullanın.
Kullanabileceğiniz çok sayıda seçenek var. Şimdilik bu makalede üçüne odaklanacağız: Shaka Player, JW Player ve Video.js.
Shaka Oynatıcı
Belgelere göre Google'ın Shaka Player, uyarlanabilir medya için açık kaynaklı bir JavaScript kitaplığıdır. Uyarlanabilir medya biçimlerini (DASH ve HLS gibi) eklenti kullanmadan bir tarayıcıda oynatır. Shaka Player bunun yerine açık web standartları MediaSource Extensions ve Şifrelenmiş Medya Uzantıları'nı kullanır.
Shaka Player, medyaların IndexedDB kullanılarak çevrimdışı depolanmasını ve oynatılmasını destekler. İçerik herhangi bir tarayıcıda depolanabilir. Lisansların depolanması, tarayıcı desteğine bağlıdır.
Shaka Player dokümanları sitesinde temel kullanım ile ilgili talimatlar bulabilirsiniz. Ancak özetle, Shaka Player'ı kullanmak için önce video veya ses öğesi içeren bir HTML sayfası oluşturmanız gerekir. Daha sonra, uygulamanızın JavaScript'ine çoklu dolguları yükler ve tarayıcı desteğini kontrol edersiniz. Tarayıcı Shaka Player desteğini onayladıktan sonra bir komut dosyası, medya öğesini sarmak, hataları dinlemek ve ardından bir manifest dosyası yüklemek için Player nesnesi oluşturur. Oradan Shaka Player gelecek.
Shaka ile medya dosyalarınızı sizin barındırmanız ve kodlamanız gerekir. Medya sunucusu oluşturmak çok karmaşık bir işlem değildir ancak medyayı kodlama/kod dönüştürme işlemi, zaman alıcı ve karmaşık olabilir. Tekrarlanan görevleri otomatikleştirmek ve süreci hızlandırmak için bu bölümü muhtemelen Zencoder, Amazon Elastic Encoder veya Google Transcoder API gibi bir hizmete boşaltmak isteyebilirsiniz.
Shaka Player'ın en önemli özelliklerinden biri de DASH ve HLS paketleme ve şifreleme için Shaka Bundler adı verilen muhteşem bir araç ve medya paketleme SDK'sı olmasıdır. Daha önce Medya dönüşümü ve Medya şifreleme konularında öğrendiğiniz medya içeriğini online yayın için hazırlayıp paketleyebilir.
JW Oynatıcı
Barındırma ve kodlama/kod dönüştürme hizmetleri sağlayan bir seçenek arıyorsanız JW Player'a bakabilirsiniz, ancak JW Player'ın özel bir yazılım olduğunu unutmayın. Diğer bir deyişle, platform veya yol haritası üzerinde fazla kontrolünüz yoktur. Videoların filigranla gösterildiği ve ticari sürümü olan ücretsiz bir sürüm vardır.
JW Player MPEG-DASH (yalnızca ücretli sürüm), Dijital hak yönetimi (DRM) (Vualto ile), etkileşimli reklamları, arayüzün özelleştirilmesini ve yerleştirmeleri destekler. API ve SDK'nın ayrıntılı bir şekilde belgelenmesi gerekir. Ancak medyanızı barındırmanın hızlı ve ücretsiz bir yolunu arıyorsanız YouTube videolarını yerleştirmek genellikle en iyi ücretsiz seçeneğinizdir.
Video.js
Web sitelerine göre Video.js, tepeden tırnağa HTML5 dünyası için oluşturulmuştur. HTML5 video ve DASH ile HLS gibi modern akış biçimlerinin yanı sıra YouTube ve Vimeo'yu da destekler. Masaüstü ve mobil cihazlarda video oynatmayı destekler ve CSS tabanlı görünümler sayesinde her yerde iyi görünür.
Video.js'yi kullanmanın birkaç yolu vardır ancak en kolay yol Fastly tarafından sağlanan ücretsiz CDN sürümünü kullanmaktır. Oynatıcının nasıl kurulacağı hakkında daha fazla bilgiyi başlangıç sayfasında bulabilirsiniz. Video.js çok güçlü bir video oynatıcıdır ve Shaka Player'da olduğu gibi videonuzu barındırmanız ve kodlamanız gerekir. Ancak, tek fark eklenti sistemidir. Burada YouTube videolarını Video.js oynatıcısında oynatabilir ve kendiniz özelleştirebilirsiniz.
Diğer çerçeveler
Birçok farklı çerçeve ve kitaplık bulunur. Bu makale şu anda piyasadaki içeriklerin küçük bir kısmını ele alır. Çerçeve seçerken proje için hangi özelliklere ihtiyacınız olduğunu ve medyanızı nasıl barındırıp kodlamayı veya kod dönüştürmeyi planladığınızı göz önünde bulundurmalısınız. Videodan önce gösterilen reklamlar veya diğer para kazanma stratejilerine ihtiyacınız var mı? Medyanız çevrimdışı kullanılabilecek mi? Bütçeniz ne kadar yüksek veya küçük? Diğer konular. Araştırma yapın ve ağınızdaki kişilerden öneri isteyin. Onlarca başka harika seçenek var. Herhangi bir seçim yapmadan önce, ekibiniz için doğru olanı seçmek ve proje yaşam döngüsü boyunca gereksiz teknik borçlar ya da karmaşıklıklar oluşturmaktan kaçınmalısınız.
Daha sonra, işlerin ağır işleri için gereken bir çerçeve olmadan, yalnızca HTML5 video nesnesini kullanarak kendi çözümünüzü sunmanın getirdiği temel zorluklara nasıl yaklaşacağınızı ve bunları nasıl çözeceğinizi göstermek için oluşturduğumuz çevrimdışı akışlı PWA hakkında bilgi edineceksiniz.