Bir web sayfasına medya eklemenin birkaç yolu vardır. Standart <video> etiketini nasıl kullanacağınızı daha önce öğrenmiştiniz. Bu makalede, varsayılan HTML5 video oynatıcının davranışını genişletmek veya değiştirmek için kullanabileceğiniz medya çerçevelerinden (veya kitaplıklarından) birkaçı hakkında bilgi edineceksiniz.
Medya çerçeveleri hem tescilli hem de açık kaynak olarak mevcuttur ve temelinde çeşitli kapsayıcı biçimleri ve aktarım protokolleri için ses ve/veya video oynatmayı destekleyen bir API grubu bulunur. İyi bir çerçeve modüler bir mimariye sahiptir ve net ve ayrıntılı dokümanlar sağlar. İdeal olarak, kurulumu ve kullanımı da nispeten kolay olmalıdır. "HTML5 video oynatıcı zaten çoğu özelliği sağlıyorsa neden bir çerçeve veya kitaplık kullanayım?" diye düşünebilirsiniz. Çok iyi bir soru. Bu konuyu daha ayrıntılı inceleyelim.
Çerçeve kullanmanın avantajları
Temel bir web sayfasının ihtiyaçlarının ötesindeki çoğu durumda, içeriğinizi yayınlamak için bir medya çerçevesi kullanmak isteyeceksiniz. Çevrimdışı oynatma, akış, analizler, pencere içinde pencere, küçük resim önizlemeleri, yerleştirme ve para kazanma (ör. doluluk oranı optimizasyonu, reklam planlama veya başlık teklifi) gibi zengin bir özellik grubu geliştirmeye ve sürdürmeye hazır değilseniz bu karmaşıklığı mevcut bir çözüme devretmeniz gerekir.
Bu noktada medya çerçeveleri devreye girer. Bu çerçeveler size bir dizi özellik ve bu özellikleri kullanabileceğiniz koşulları sunar. Ardından, projeniz için hangi çerçevenin uygun olduğuna karar vermeniz gerekir. Bir sonraki makalede, çeşitli karmaşık özellikleri uygulayan çevrimdışı akış özelliğine sahip bir PWA'yı nasıl geliştirdiğimizi ele alacağız. Spoiler uyarısı: Bu çok fazla çalışma gerektirdi ve henüz üretime hazır bir çözüm olmaktan uzak. Kafanızı ağrıtmayın ve bir çerçeve kullanın.
Seçebileceğiniz birçok seçenek var. Bu makalede şimdilik Shaka Player, JW Player ve Video.js olmak üzere üç seçeneğe odaklanacağız.
Shaka Player
Dokümanlara göre Google'ın Shaka Player, uyarlanabilir medya için açık kaynaklı bir JavaScript kitaplığıdır. Uyumlu medya biçimlerini (ör. DASH ve HLS) tarayıcıda eklenti kullanmadan oynatır. Bunun yerine Shaka Player, açık web standartları olan MediaSource Extensions ve Encrypted Media Extensions'i kullanır.
Shaka Player, IndexedDB'i kullanarak medyanın çevrimdışı 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üman sitesinde temel kullanım talimatları bulunmaktadır. Ancak Shaka Player'ı kullanmak için öncelikle video veya ses öğesi içeren bir HTML sayfası oluşturmanız gerekir. Ardından, uygulamanızın JavaScript'ine polyfill'leri yükleyin ve tarayıcı desteği olup olmadığını kontrol edin. Tarayıcı, Shaka Player desteğini onayladıktan sonra bir komut dosyası, medya öğesini sarmalamak, hataları dinlemek ve ardından bir manifest dosyası yüklemek için bir Player nesnesi oluşturur. Bundan sonrasını Shaka Player devralacak.
Shaka'da medya dosyalarınızı kendiniz barındırmanız ve kodlamanız gerekir. Medya sunucusu oluşturmak çok karmaşık bir işlem değildir ancak medya 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ü Zencoder, Amazon Elastic Encoder veya Google Transcoder API gibi bir hizmete aktarmak isteyebilirsiniz.
Shaka Player'ın en iyi özelliklerinden biri, DASH ve HLS paketleme ve şifreleme için Shaka Packager adlı gerçekten muhteşem bir araç ve medya paketleme SDK'sı sunmasıdır. Medya içeriğini online akış için hazırlayıp paketleyebilir. Bu konuda daha önce Medya dönüştürme ve Medya şifreleme bölümlerinde bilgi edinmiştiniz.
JW Player
Barındırma ve kodlama/kod dönüştürme hizmetleri sunan bir seçenek arıyorsanız JW Player'ı inceleyebilirsiniz. Ancak JW Player'ın tescilli bir yazılım olduğunu unutmayın. Yani platform veya yol haritası üzerinde çok fazla kontrol sahibi değilsiniz. Videoların filigranla gösterildiği temel bir ücretsiz sürüm ve ticari 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 reklam, arayüzün özelleştirilmesi ve yerleşik oynatma özelliklerini destekler. İyi dokümante edilmiş bir API ve SDK olmalıdır. 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ğiniz olacaktır.
Video.js
Web sitelerine göre Video.js, sıfırdan HTML5 dünyası için tasarlanmıştır. HTML5 videoyu ve DASH ile HLS gibi modern akış biçimlerinin yanı sıra YouTube ve Vimeo'yu destekler. Masaüstü ve mobil cihazlarda video oynatmayı destekler ve CSS tabanlı kaplamaları sayesinde her yerde iyi görünür.
Video.js'yi kullanmanın birkaç yolu vardır ancak en kolayı Fastly tarafından sağlanan ücretsiz CDN sürümünü kullanmaktır. Oynatıcıyı nasıl kuracağınız hakkında daha fazla bilgiyi başlangıç sayfasında bulabilirsiniz. Video.js çok güçlü bir video oynatıcıdır. Shaka Player'a benzer şekilde, videonuzu barındırmanız ve kodlamanız gerekir. Ancak aralarındaki en önemli fark, Video.js oynatıcıda YouTube videoları oynatma gibi işlemleri yapabileceğiniz ve özelleştirebileceğiniz eklenti sistemidir.
Diğer çerçeveler
Birçok farklı çerçeve ve kitaplık mevcuttur. Bu makale, mevcut seçeneklerin yalnızca bir kısmını kapsamaktadır. Bir çerçeve seçerken proje için 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 bulundurmanız gerekir. Videodan önce gösterilen reklamlara veya başka para kazanma stratejilerine mi ihtiyacınız var? Medyalarınız çevrimdışı kullanılabilir mi? Bütçeniz ne kadar büyük veya küçük? Veya başka birçok neden. Araştırmanızı yapın ve ağınızdaki kişilerden öneriler isteyin. Onlarca mükemmel seçenek daha vardır. Herhangi bir seçim yapmadan önce ekibiniz için doğru olanı seçmek üzere biraz zaman ayırın ve proje yaşam döngüsü boyunca gereksiz teknik borç veya karmaşıklık oluşturmaktan kaçının.
Ardından, ağır işleri üstlenecek bir çerçeve olmadan yalnızca HTML5 video nesnesi kullanarak kendi çözümünüzü kullanıma sunmanın getirdiği temel zorluklara nasıl yaklaşacağınızı ve bu zorluklarla nasıl başa çıkacağınızı göstermek için geliştirdiğimiz çevrimdışı akış özellikli PWA hakkında bilgi edineceksiniz.