Medya akışıyla ilgili temel bilgiler

Derek Herman

Jaroslav Polakovič

Bu makalede, daha gelişmiş olan medya akışı kavramı hakkında bilgi edineceksiniz. Ayrıca kursun sonunda, akışla ilgili çeşitli kullanım alanlarını, protokolleri ve uzantıları iyice kavrayacaksınız. Akışın ne olduğunu açıklayarak başlayalım.

Medya akışı, medya içeriğini parça parça aktarmanın ve oynatmanın bir yoludur. Oynatıcı, ağ için optimize edilmediği takdirde yavaş olabilen tek bir dosya yüklemek yerine hedef medyanın ayrı veri parçalarına nasıl bölündüğünü açıklayan bir manifest dosyası okur. Medya parçaları daha sonra çalışma zamanında (muhtemelen farklı bit hızlarında) dinamik bir şekilde tekrar birleştirilir. Bunu daha sonra öğreneceksiniz.

Web sitenizde akış sağlamak için sunucunun Aralık HTTP istek başlığını desteklemesi gerektiğini unutmayın. Accept-Ranges üstbilgisi hakkında daha fazla bilgiyi <video> ve <source> etiketleri makalesinde bulabilirsiniz.

Akış kullanım alanları

Medya parçalarını ve akışı açıklayan gerekli manifestleri üretmek tam olarak kolay değildir. Ancak akış, yalnızca bir <video> öğesini bir statik kaynak dosya grubuna işaret ederek elde edilemeyen bazı ilginç kullanım alanlarını ortaya çıkarır. Web sayfasına medya ekleme hakkında daha fazla bilgiyi sonraki bölümde öğreneceksiniz. <video> öğesine birden fazla dosya yüklemekten daha fazlasını yapmak istiyorsanız öncelikle multimedya akışına ilişkin birkaç kullanım alanını bilmeniz gerekir.

• Uyarlanabilir akış, medya parçalarının birkaç bit hızında kodlandığı ve istemcinin şu anda kullanılabilir olan bant genişliğine uyan en yüksek kaliteli medya parçasının medya oynatıcıya döndürüldüğü yerdir.
• Canlı yayın, medya parçalarının kodlandığı ve gerçek zamanlı olarak kullanıma sunulduğu yerdir.
• Medya yerleştirme, oynatıcının medya kaynağını değiştirmesine gerek kalmadan reklam gibi diğer medyaların bir akışa yerleştirilmesidir.

Akış protokolleri

Web'de en sık kullanılan iki akış protokolü HTTP üzerinden Dinamik Uyarlanabilir Akış (DASH) ve HTTP Canlı Yayın'dır (HLS). Bu protokolleri destekleyen oynatıcılar, oluşturulan manifest dosyasını getirir, hangi medya parçalarının isteneceğini bulur ve daha sonra bunları nihai medya deneyiminde birleştirir.

Akış oynatmak için <video> kullanılıyor

Birçok tarayıcı, akışınızı yerel olarak oynatmaz. HLS oynatma için bazı yerel destek verilse de tarayıcılar, genellikle yerel DASH akış oynatmayı desteklemez. Bu, genellikle <video> öğesindeki <source> öğesinin bir manifest dosyasına yönlendirilmesinin yeterli olmadığı anlamına gelir.

<video controls>
  <source src="manifest.mpd" type="application/dash+xml">
</video>

Eksiklik gibi görünen şey aslında gizli bir gücü ifade eder. Akışlar güçlüdür ve akışları tüketen uygulamaların farklı ihtiyaçları vardır.

Manifest dosyaları genellikle tek bir medyanın birçok varyantını açıklar. Farklı bit hızları, birkaç ses parçası ve hatta farklı biçimlerde kodlanmış aynı medyayı düşünün.

Bazı uygulamalar daha fazla videonun arabellekte kalmasını isterken bazıları da yaklaşan bir bölümün videonun ilk birkaç saniyesini önceden getirmek, bazılarıysa uyarlanabilir akış için kendi mantığını uygulamak isteyebilir. Bu noktada, oynatma için medya akışları oluşturmak üzere yerleşik bir tarayıcı özelliğine sahip olmak istersiniz ve örneğin böyle bir özellik de vardır.

Medya Kaynağı Uzantıları

Neyse ki W3C, JavaScript'in medya akışlarımızı oluşturmasına olanak tanıyacak Medya Kaynağı Uzantıları (MSE) adlı bir özelliği tanımladı. Özetle MSE, geliştiricilerin bir <video> öğesine MediaSource nesnesi eklemelerine ve MediaSource örneğine ekli arabelleklere pompalanan medya verilerini oynatmalarına olanak tanır.

Temel örnek

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener(
  'sourceopen',
  () => {
    const mimeString = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
    const buffer = mediaSource.addSourceBuffer(mimeString);

    buffer.appendBuffer( /* Video data as `ArrayBuffer` object. */ )
  }
);

Yukarıdaki basitleştirilmiş örnekte birkaç şey gösterilmiştir:

• <video> açısından, medya verilerini bir URL'den alıyor.
• Oluşturulan URL yalnızca bir MediaSource örneğine işaret eder.
• MediaSource örneği, bir veya daha fazla SourceBuffer örneği oluşturur.
• Daha sonra, arabelleğe yalnızca ikili medya verileri ekleriz (ör. fetch kullanarak).

Bu temel kavramlar basit olduğu ve sıfırdan DASH ve HLS uyumlu video oynatıcı yazmak kesinlikle mümkün olsa da çoğu kişi genellikle Shaka Player, JW Player veya Video.js gibi zaten mevcut olan, olgunlaşmış açık kaynaklı çözümlerden birini seçer.

Ancak, sadece basit <video> öğesini kullanarak çevrimdışı medya oynatma sağlayan, kendi temel akışlı medya web sitenizi nasıl geliştirebileceğinizi gösteren Kino adlı bir Medya PWA demosu oluşturduk. Yol haritamızda, diğer özelliklerin yanı sıra çerçeveleri ve dijital hak yönetimini desteklemek için planlar var. Bu nedenle zaman zaman güncellemeler için bu sayfayı kontrol edin veya özellik isteğinde bulunun. Çevrimdışı akışla PWA başlıklı makalede bu konu hakkında daha fazla bilgi bulabilirsiniz.

Medya parçaları biçimi

DASH ve HLS, medya parçalarının uzun bir süre farklı biçimlerde kodlanmasını gerektiriyordu. Ancak 2016'da, DASH'in de desteklediği bir biçim olan HLS'ye standart parçalı MP4 (fMP4) dosyaları için destek eklendi.

fMP4 kapsayıcısı ve H.264 codec'ini kullanan video parçaları hem protokoller tarafından desteklenir hem de oynatıcıların büyük çoğunluğu tarafından oynatılabilir. Bu, içerik üreticilerinin videolarını yalnızca bir kez kodlamalarına olanak tanıyarak zamandan ve disk alanından tasarruf sağlar.

Daha kaliteli ve daha düşük dosya boyutları elde etmek için VP9 gibi daha verimli biçimler kullanarak birkaç medya parçası grubunu kodlamayı seçebilirsiniz. Ancak bu konuda fazla ilerlemeden önce medya dosyalarını web için hazırlamayı öğrenmeniz gerekir. Sıradaki konumuz bu.