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ısının davranışını genişletmek veya değiştirmek için kullanabileceğiniz bazı medya çerçeveleri (veya kitaplıklar) hakkında bilgi edineceksiniz.
Medya çerçeveleri hem özel hem de açık kaynak çeşitlerine sahiptir. Bunların temelinde çeşitli container biçimleri ve iletim protokolleri için ses ve/veya video oynatmayı destekleyen bir API kümesi bulunur. İyi bir çerçeve modüler bir mimariye sahiptir, net ve ayrıntılı belgeler sağlar. İdeal olarak, kurulumu ve kullanımı da nispeten kolay olmalıdır. Kendinize, "HTML5 video oynatıcı zaten çoğu özelliği sağlıyorsa neden bir çerçeve veya kitaplık kullanmalıyım?" diye soruyor olabilirsiniz. Harika bir soru. Haydi başlayalım.
Çerçeve kullanmanın avantajları
Temel bir web sayfasının ihtiyaçlarının dışında olan ç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 para kazanma gibi zengin bir özellik grubu (ör. doluluk oranı optimizasyonu, reklam zaman planlaması veya başlıktan teklif alma) geliştirip sürdürmeye hazır değilseniz muhtemelen bu karmaşıklığı mevcut bir çözüme aktarmanız gerekir.
Medya çerçeveleri burada devreye girer. Size bir dizi özellik ve bu özellikleri kullanabileceğiniz koşullar sunarlar. Sonra sizin projeniz için hangi çerçevenin doğru olduğuna karar vermeniz gerekir. Bir sonraki makalede, birkaç karmaşık özellik uygulayan çevrimdışı akışlı bir PWA'yı nasıl oluşturduğumuzdan bahsedeceğiz. Biraz epey çalışıldı. Ancak hâlâ prodüksiyona hazır bir çözüm olmaktan çok uzak. Artık uğraşmaktan kurtulun ve bir çerçeve kullanın.
Seçebileceğiniz birçok seçenek vardır. Şimdilik bu makalede Shaka Player, JW Player ve Video.js olmak üzere üç seçeneğe odaklanacağız.
Shaka Oyuncusu
Belgelere göre Google'ın Shaka Player, uyarlanabilir medya için açık kaynaklı bir JavaScript kitaplığıdır. Eklenti kullanmadan bir tarayıcıda uyarlanabilir medya biçimlerini (ör. DASH ve HLS) oynatır. Bunun yerine Shaka Player açık web standartları olan MediaSource Extensions ve Şifrelenmiş Medya Uzantıları'nı kullanır.
Shaka Player, IndexedDB kullanarak medyaların çevrimdışı olarak depolanmasını ve oynatılmasını da destekler. İçerik herhangi bir tarayıcıda depolanabilir. Lisansların depolanması tarayıcı desteğine bağlıdır.
Shaka Player dokümantasyon sitesinde temel kullanım ile ilgili talimatlar bulabilirsiniz. Ancak, Shaka Player'ı kullanmak için öncelikle bir video veya ses öğesi içeren bir HTML sayfası oluşturmanız gerekir. Ardından, uygulamanızın JavaScript'ine çoklu dolguları yükler ve tarayıcı desteğini kontrol edersiniz. Tarayıcı, Shaka Player'ı desteklediğini onayladıktan sonra, bir komut dosyası medya öğesini sarmalamak için bir Player nesnesi oluşturur, hataları dinletir ve ardından bir manifest dosyası yükler. Shaka Player devralacak.
Shaka ile medya dosyalarınızı kendiniz barındırmanız ve kodlamanız gerekir. Medya sunucusu oluşturmak aşırı karmaşık bir işlem değildir, ancak medyayı kodlama/kod dönüştürme işlemi zaman alabilir ve karmaşık olabilir. Tekrarlanan görevleri otomatikleştirmek ve süreci hızlandırmak için bu parçayı Zencoder, Amazon Elastic Encoder veya Google Transcoder API gibi bir hizmete boşaltmak isteyebilirsiniz.
Shaka Player'ın en iyi yanı, DASH ve HLS paketleme ve şifrelemesi için Shaka Paketleyici adlı gerçekten harika bir araç ve medya paketleme SDK'sının olmasıdır. Daha önce Medya dönüşümü ve Medya şifrelemesi konularında öğrendiğiniz online akış için medya içeriğini hazırlayıp paketleyebilir.
JW Oynatıcı
Barındırma ve kodlama/kod dönüştürme hizmetleri sunan bir seçenek arıyorsanız JW Player'a bakabilirsiniz ancak JW Player'ın özel bir yazılım olduğunu unutmayın. Yani platform veya yol haritası üzerinde çok fazla kontrolünüz yoktur. Videoların filigranla ve ticari sürümle gösterildiği temel bir ücretsiz sürüm vardır.
JW Player, MPEG-DASH (yalnızca ücretli sürüm), Dijital hak yönetimi (DRM) (Vualto ile), etkileşimli reklamcılığı, arayüzün özelleştirilmesi ve yerleştirmeler ile akışı destekler. Ayrıntılı bir şekilde belgelenmiş bir API ve SDK var. Ancak, medya içeriklerinizi barındırmanın hızlı ve ücretsiz bir yolunu arıyorsanız genellikle ücretsiz olarak en iyi seçeneğiniz YouTube videoları yerleştirmektir.
Video.js
Web sitesine göre, Video.js sıfırdan bir HTML5 dünyası için geliştirilmiştir. HTML5 video ve DASH ve 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ı dış görünümler ile her yerde güzel görünür.
Video.js'yi kullanmanın birkaç yolu vardır ancak en kolay olanı, Fastly tarafından sağlanan ücretsiz CDN sürümünü kullanmaktır. Başlarken sayfasında oynatıcının nasıl ayarlanacağı hakkında daha fazla bilgi edinebilirsiniz. Video.js çok güçlü bir video oynatıcıdır ve Shaka Player gibi videonuzu da barındırmanız ve kodlamanız gerekir. Ancak bir fark, YouTube videolarını Video.js oynatıcısında oynatma ve özelleştirme gibi işlemleri yapabileceğiniz eklenti sistemidir.
Diğer çerçeveler
Kullanabileceğiniz pek çok farklı çerçeve ve kitaplık vardır. Bu makale, kullanıma sunulanlarla ilgili sadece küçük bir açıklamadır. Çerçeve seçerken projede hangi özelliklere ihtiyacınız olduğunu ve medyanızı nasıl barındırmayı, kodlamayı veya kod dönüştürmeyi planladığınızı göz önünde bulundurmalısınız. Videodan önce gösterilen reklamlara veya diğer para kazanma stratejilerine mi ihtiyacınız var? Medyanız çevrimdışı kullanılabilecek mi? Bütçeniz ne kadar büyük veya küçük? Ya da göz önünde bulundurulması gereken diğer noktalar. Araştırma yapın ve ağınızdaki insanlardan öneri isteyin. Daha birçok muhteşem seçenek vardır. Herhangi bir seçim yapmadan önce biraz vakit ayırıp ekibiniz için doğru seçeneği belirleyin ve proje yaşam döngüsü boyunca sürdürülmesi gereken gereksiz teknik borçlar veya karmaşıklık yaratmaktan kaçının.
Sırada, ağır işlerin üstesinden gelmek için bir çerçeve olmadan yalnızca HTML5 video nesnesini kullanarak kendi çözümünüzü hazırlamanın getirdiği temel zorluklara nasıl yaklaşacağınızı ve bunların üstesinden nasıl gelebileceğinizi göstermek için geliştirdiğimiz çevrimdışı akışlı PWA hakkında bilgi edineceksiniz.