HTML5 Medya Kaynağı Uzantıları: Prodüksiyon Videosunu Web'e Taşıma

Son on yılda Flash ve Silverlight gibi eklentiler, tarayıcılarda zengin bir video tüketimi sağlayarak YouTube ve Netflix gibi popüler hizmetleri güçlendirdi. Ancak, bu yaklaşım son birkaç yılda HTML5'e doğru kaymıştır.

Neredeyse iki yıl önce, W3C, özellikle video için yeni bir HTML öğeleri ve API seti ile gelen HTML5 spesifikasyonunun son önerisini yayınladı. Bazıları web sayfalarında daha fazla anlambilimi amaçlar, ancak yeni özellikler getirmez. Diğerleri, Adobe Flash, Microsoft Silverlight veya Java gibi eklentilere ihtiyaç duymadan web'in olanaklarını genişletir ve geliştiricilerin olanaklarını geliştirir.

SmashingMag'de Daha Fazla Okuma :

• Web Teknolojileri ile Yerli Bir Deneyim Sağlamak
• HTML5 Ayrıntılar Öğesi İçin Tam Bir Çoklu Dolgu Yapma
• Aşamalı Web Uygulamaları İçin Başlangıç ​​Kılavuzu
• HTML5 Logosu: Ne Düşünüyorsunuz?

Bu özellikle önemlidir, çünkü örneğin Google, Firefox'ta olduğu gibi NPAPI'nin (bu eklentiler tarafından kullanılan bir API) kaldırıldığını duyurmuştur ve Microsoft eklentisiz taramayı savunmaktadır. Bu satıcılar hala bir Flash oynatıcı sağlıyor olsa da, sağlamamaları muhtemelen an meselesidir. Ayrıca, çoğu eklentileri desteklemediği ve Flash oynatıcısı olmadığı için mobil cihazlardaki tarayıcılar bir adım ötededir.

Yeni HTML5 öğelerinden bazılarına ve bunların video için neleri iyileştirdiğine bakalım:

• <canvas> grafikleri, oyun grafiklerini ve daha fazlasını oluşturmak için komut dosyaları sağlar. Buna bazen Canvas JavaScript API'si denir. canvas öğesi, grafik kartının GPU'su kullanılarak 2D ve 3D grafikler oluşturmak için WebGL ile de kullanılabilir.
• <video> , gerçekten harika olan, kullanıma hazır video oynatmayı sağlar. Bu nihayet web üzerinde eklentisiz multimedyayı gerçeğe dönüştürüyor. Aslında, tarayıcı satıcıları tek bir biçim üzerinde hemfikir görünüyorlar - Opera Mini'nin dikkate değer bir istisnası dışında, modern tarayıcılarda evrensel olarak desteklenen MPEG-4/H.264.
• <audio> , bir web sayfasındaki ses içeriğinin kullanıma hazır oynatılmasını sağlar. Videoda olduğu gibi, hangi kapsayıcı biçimlerinin ve kodeklerin destekleneceği kararı tarayıcı satıcılarına bırakılmıştır.
• <track> , bir videodaki altyazılar gibi zamanlı metin parçaları için kullanılabilir. WebVTT dosyaları kutunun dışında desteklenir.

Yeni öğelerin çoğu, tüm modern tarayıcılarda uygulandıkları için HTML5 video oynatıcı kodunda bir süredir biliniyor ve kullanılıyor. Spesifikasyon sabittir. Yine de W3C'nin yapacak çok işi var.

Benim için W3C'nin üzerinde çalıştığı en önemli standart, şu anda "Aday Tavsiyesi" statüsüne sahip olan "Medya Kaynak Uzantıları" (MSE'ler) standardıdır. Bu JavaScript API'si, <video> , <audio> ve diğer öğeler için medya akışları oluşturmamıza izin vererek, MPEG-DASH gibi uyarlamalı akış standartlarını saf HTML5 ve JavaScript'te etkinleştirir.

Bir başka ilginç olan da, korumalı içeriğin HTML5 ve JavaScript'te oynatılmasına izin veren "Şifreli Medya Uzantıları" standardıdır. Ancak bu şu anda bir “Çalışma Taslağı” ve sonuçlandırılması biraz zaman alacak.

Yeni standardı memnuniyetle karşılıyoruz ve bir Flash oynatıcıya veya eklentiye ihtiyaç duymayacağımız, multimedyanın tek bir uygulama ile hemen hemen her cihazda görüntülenebileceği zamanı sabırsızlıkla bekliyoruz.

Neden MPEG-DASH?

MPEG-DASH akış biçimine ve HTML5'te neden kullanıldığına bakalım. MPEG-DASH (DASH, HTTP üzerinden dinamik uyarlamalı akış için kısadır), MPEG ve ISO (ISO/IEC 23009-1) tarafından onaylanmış uluslararası, satıcıdan bağımsız bir standarttır. Apple HLS, Microsoft Kesintisiz Akış ve Adobe HDS gibi önceki uyarlanabilir akış teknolojileri, satıcılardan bağımsız akış sunucuları veya oynatma istemcileri için sınırlı desteğe sahip satıcılar tarafından piyasaya sürüldü. Satıcıya bağlı bir durum açıkça arzu edilen bir durum değildi ve bu nedenle standardizasyon kuruluşları, 2012 yılında MPEG-DASH'in onaylanmasıyla sonuçlanan bir uyum süreci başlattı.

Özetle MPEG-DASH'in amaçları ve faydaları şunlardır:

• Video oynatma sırasında arabelleğe alma ve duraklamaların yanı sıra başlatma gecikmelerini azaltın.
• İstemcinin bant genişliği durumuna uyum sağlamaya devam edin.
• En yüksek ölçeklenebilirliği ve esnekliği sağlamak için istemci tabanlı akış mantığını kullanın.
• Mevcut ve uygun maliyetli HTTP tabanlı CDN'leri, proxy'leri ve önbellekleri kullanın.
• HTTP kullanarak NAT'ları ve güvenlik duvarlarını verimli bir şekilde atlayın.
• Aynı dosyadan birden çok eşzamanlı DRM şemasının sinyalleşmesi, teslimi ve kullanımı yoluyla ortak şifrelemeyi etkinleştirin.
• Basit ekleme ve (hedefli) reklam eklemeyi etkinleştirin.
• "Hile modunu" verimli bir şekilde destekleyin.
• Ve daha fazlası!

Son yıllarda, MPEG-DASH, HTML5'in video ve audio etiketleri aracılığıyla DASH oynatmayı sağlayan HTML5 MSE'leri ve web tarayıcılarında DRM korumalı oynatmayı sağlayan HTML5 Şifreli Medya Uzantıları gibi yeni standardizasyon çabalarına entegre edilmiştir. . Ayrıca, MPEG-DASH ile DRM koruması, MPEG-CENC ile (ortak şifreleme için) farklı sistemler arasında uyumlu hale getirilmiştir; ve farklı akıllı TV platformlarında MPEG-DASH oynatma, Hybrid Broadcast Broadband TV (HbbTV 1.5 ve HbbTV 2.0) ile entegrasyon yoluyla etkinleştirilir.

Ayrıca, MPEG-DASH standardının kullanımı, DASH Industry Forum ve onun DASH-AVC/264 tavsiyeleri etrafındaki endüstri çabaları ve ayrıca DASH-HEVC/265 tavsiyesi gibi ileriye dönük girişimlerle basitleştirilmiştir. MPEG-DASH içinde H.265/HEVC.

Bugün, MPEG-DASH, yakın zamanda bu yeni standarda geçen Netflix ve Google gibi hizmetler tarafından hızlandırılarak giderek daha fazla dağıtılıyor. Bu iki ana trafik kaynağıyla MPEG-DASH, toplam İnternet trafiğinin %50'sini zaten oluşturuyor.

MSE'ler Nasıl Çalışır?

Şimdi MSE'lerin detaylarına ve geliştiriciler tarafından nasıl kullanıldıklarına bakalım. MSE'ler, JavaScript'in audio ve video etiketleri için medya akışlarını dinamik olarak oluşturmasına izin vermek için HTMLMediaElement genişleten bir belirtimdir. Bu daha önce mümkün değildi çünkü bu etiketler yalnızca tam dosyalara (yani MP4 dosyalarına) erişebiliyordu. Bu yaklaşıma aşamalı akış veya aşamalı indirme de denir, çünkü medya dosyaları aynı anda indirilir ve oynatılır, böylece sözde akış sağlanır.

Ancak bu, zayıf arama kabiliyetini ve video ve ses kalitesini kullanıcının bant genişliği durumuna uyarlama olasılığını da beraberinde getiriyor. Geliştiriciler, audio ve video etiketleri için girdiler olarak JavaScript'te medya akışları oluşturarak artık bir medya akışını dinamik olarak kullanıcının bağlamına uyarlayabilir ve böylece akış deneyimini iyileştirebilir.

Belirtildiği gibi, MPEG-DASH, MSE'ler için tercih edilen akış formatıdır. Öyleyse, HTML5 MSE tabanlı bir video oynatıcı oluşturmak için gerekli adımlara bakalım:

1. Video akışının kalite düzeylerinin ve çözünürlüklerinin sayısı, ses dilleri ve altyazılarının yanı sıra medya bölümlerinin adı gibi video akışının ayrıntılarını açıklayan - MPEG-DASH'de MPD olarak adlandırılan - bildirim dosyasını indirin ve ayrıştırın. HTTP tabanlı kaynak sunucudaki veya CDN'deki dosyalar.
2. İstemci cihazdaki kullanılabilir bant genişliğini tahmin edin, arabelleksiz akış elde etmek için uygun video kalitesini seçin ve medya segmentlerini JavaScript'te indirin.
3. İndirilen medya segmentlerini JavaScript'teki MSE arabelleğine teslim edin.
4. Videonun kodunu çöz ve video etiketi aracılığıyla, genellikle donanımda oluştur.

Netflix ve YouTube tarafından kullanılan HTML5 tabanlı uyarlanabilir akış oynatıcıları bu şekilde çalışır. DASH-IF açık kaynak projesi dash.js ve Bitdash HTML5 oynatıcı gibi geliştiricilerin ve içerik sağlayıcıların HTML5'te uyarlanabilir bit hızı akışına geçişini kolaylaştıran zaten oldukça olgun çözümler var.

MPEG-DASH içerik üretimi de basittir ve x264 ve MP4Box gibi açık kaynaklı araçların yanı sıra Bitcodin gibi ticari kodlama hizmetleri tarafından desteklenir.

Ancak, MSE'lerin kullanımı MPEG-DASH ile sınırlı değildir. Gittikçe daha fazla proje (hls.js dahil) ve oynatıcı (Bitdash dahil), MSE'leri kullanarak Apple'ın HTML5'teki HLS biçimini destekliyor. Bunu, MPEG2-TS kapsayıcıları olan HLS medya segmentlerini HTML5 ve MPEG-DASH için gerekli olan ISO Temel Medya Dosyası Formatına dönüştürerek yaparlar.

DRM için Şifreli Medya Uzantıları

Şu anda DRM pazarında, önde gelen DRM sistemi PlayReady'nin Chrome ve Firefox'tan düşmesine yol açan Silverlight gibi NPAPI eklentilerinin yakında düşmesinin neden olduğu büyük değişiklikler yaşanıyor. Bu, neredeyse tüm premium içerik sağlayıcılarını zor durumda bırakıyor çünkü teknolojileri değiştirmek ve geleceğe yönelik bir çözüm bulmak zorunda kalacaklar.

Premium akışlı medya yayıncıları , içeriklerinin PC ve Android cihazlarda Chrome ve Firefox'ta güvenliğini sağlamak için Microsoft'un PlayReady DRM'sine güvenemeyecek. İçerik koruma ve akış platformu stratejilerini yeniden değerlendirmeleri ve geleceğe yönelik bir çözüm bulmaları ve ardından kısa süre içinde teknolojileri değiştirmeleri gerekecek.

Birçok içerik sağlayıcı için MPEG-DASH tercih edilen teknoloji olarak ortaya çıkmıştır. DASH projeleri hızlanan bir hızla hayata geçirilmiştir ve Widevine DRM'li MSE'ler ve Şifreli Medya Uzantıları (EME'ler) en uygun alternatif olarak görünmektedir. Ayrıca, MPEG-CENC, korumalı içeriğin yalnızca bir sürümüyle ayrı DRM sistemlerinin desteklenmesini mümkün kılar ve EME'ler, MPEG-DASH tabanlı içerik için MSE'leri temel alır.

Dolayısıyla, farklı DRM sistemlerinin bu kombinasyonu - örneğin, Chrome ve Android için Widevine Modular, Internet Explorer ve Edge için Microsoft PlayReady ve Firefox için Adobe'nin Primetime - bir içerik parçasının bir sürümü için içerik sağlayıcılara MPEG'e geçiş için ek teşvik sağlar - Akış, DRM ve CDN'ler ile esnekliği göz önüne alındığında, uluslararası bir standart olarak DASH.

MSE'ler ve EME'ler için Tarayıcı Desteği

Tarayıcı satıcılarının HTML5 ve özellikle MSE'ler tarafından birkaç yıl yavaş benimsenmesinden sonra, artık çoğunun bunu desteklediğini görüyoruz. Bu aynı zamanda EME'ler için de geçerlidir, ancak bu durumda her satıcı farklı bir DRM sistemine gidiyor ve ekosistem biraz daha farklı.

Ancak, kullanıcıların %99'una ulaşmak için, MSE'leri, özellikle eski tarayıcı sürümlerini ve iOS'ta Safari'yi desteklemeyen tarayıcıları da destekleyen bir video akışı kurulumuna sahip olmamız gerekiyor. Eski tarayıcılara, Bitdash oynatıcı tarafından gösterildiği gibi MSE'ler tarafından kullanılan aynı MPEG-DASH içeriğini oynatabilen Flash tabanlı bir oynatıcı kullanılarak kolayca sunulabilir. iOS cihazlarını desteklemek için Apple'ın HTML5 için zorunlu kıldığı HLS adlı akış biçimini kullanmamız gerekiyor. MSE'ler gibi açık standartlar, OS X'te Safari'de desteklenmelerine rağmen Apple tarafından desteklenmez.

Aşağıdaki matris, günümüzde tarayıcılar ve platformlar arasında MSE ve EME desteğinin durumuna ilişkin bir genel bakış sunar (Bitmovin'in izniyle):

HTML5 Videonun Geleceği

4K ve UHD gibi daha yüksek kaliteli formatlar ve mobil cihazlara akış için özellikle önemli olan video sıkıştırmayı daha da verimli hale getiren yeni medya kodekleri pazara giriyor. En yaygın kodlayıcı HEVC/h.265'tir ve bundan birkaç yıl sonra varsayılan kod çözücü olabilir (eğer patent durumu bunu mahvetmezse). Ayrıca oynatma için tarayıcının yerleşik MSE'lerini kullanacak ve akış formatı olarak MPEG-DASH'ı kullanacak ve bu açık standardın esnekliğini gösterecektir.

Video oynatıcı geliştiricilerinin, SourceBuffer'ı oluştururken codec bileşeninin özniteliğini değiştirmek gibi bazı basit uyarlamaları gerçekleştirmesi yeterlidir; ve temeldeki tarayıcı HEVC kod çözmeyi destekliyorsa (büyük olasılıkla bir donanım kod çözücüsü tarafından yapılır), o zaman HEVC MPEG-DASH akışlarınızı HTML5'te izleyebilirsiniz! HEVC desteğiyle gelen Microsoft Edge gibi tarayıcılarla başarıyla test ettik. Ayrıca, Google kısa süre önce Chromium tarayıcısında desteği duyurdu.

Bununla birlikte, HEVC henüz İnternet video varlıklarının büyük çoğunluğu için mevcut değildir ve yalnızca birkaç cihaz bunun kodunu çözebilir. Ve elbette, şehirdeki tek codec bileşeni değil. Açık ve telif ücretsiz video kodlama formatı VP9 (VP8'in halefi), daha da iyi bir kodlama verimliliğine sahip olmayı amaçlar ve halihazırda Google Chrome ve Microsoft Edge gibi popüler tarayıcılar tarafından desteklenmektedir ve bu codec bileşeni de MSE ile uyumludur. Ancak, hangi codec bileşenlerinin günlük akış rutinimize gireceğini öngöremiyoruz. Ama VP8/9, AVC veya HEVC olsun, MSE'ler ve MPEG-DASH hazır!

Yaklaşan bir trend, HTML5'te kullanımı oldukça basit olan 360 derecelik videodur. Geliştiriciler, MSE'lerin uyarlanabilir akış desteğinden yararlanabilir ve bunun üzerine 360 ​​derecelik bir deneyim için bir JavaScript veya WebGL oluşturma katmanı ekleyebilir. Geçenlerde bu konu hakkında ve HTML5, JavaScript, DASH ve WebGL kullanarak sanal gerçeklik için Netflix benzeri bir hizmetin nasıl oluşturulacağı hakkında bir konuşma yaptım.

Çözüm

Umarım bu makale size web'deki videonun durumu ve geleceği hakkında iyi bir genel bakış sağlamıştır. MSE'ler ve EME'ler, Flash ve Silverlight gibi eklentilerin yerini alarak web'deki video için açık standartlardan oluşan bir ekosisteme doğru büyük adımlardır. Ayrıca HTML5, masaüstü, mobil ve akıllı TV ortamları dahil olmak üzere günümüzün çok platformlu dünyasında tercih edilen platformlara giriyor.

MPEG-DASH gibi akış standartlarının yanı sıra içerik sağlayıcılar, platformlar ve cihazlar arasında birleşik bir video çözümüne sahip olabilir. Arabelleğe almayı önleyen, yükleme sürelerini azaltan ve her kullanıcının bant genişliği ve cihaz durumu için mümkün olan en iyi kaliteyi sağlayan uyarlanabilir akış biçimleri aracılığıyla kullanıcı deneyimini iyileştirebilirler.