Medya akışıyla ilgili temel bilgiler

Derek Herman

Jaroslav Polakovič

Bu makalede, daha gelişmiş bir medya akışı kavramı hakkında bilgi edineceksiniz ve bu makalenin sonunda, çeşitli akış kullanım alanlarını, protokollerini ve uzantılarını iyice anlamış olacaksınız. Akışın ne olduğuna dair bir açıklamayla başlayalım.

Medya akışı, medya içeriğini parça parça iletmenin ve oynatmanın bir yoludur. Oynatıcı, ağ için optimize edilmemişse yavaş olabilen tek bir dosya yüklemek yerine, hedef medyanın farklı 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 dinamik olarak bir araya getirilir. Bu da muhtemelen daha sonra öğreneceğiniz farklı bit hızlarında yapılır.

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

Akış kullanım alanları

Medya parçaları ve akışı açıklayan gerekli manifestler oluşturmak tam olarak basit değildir. Ancak akış, yalnızca bir <video> öğesini bir dizi statik kaynak dosyaya işaret ederek elde edilmesi mümkün olmayan bazı ilginç kullanım alanlarının kilidini açar. Sonraki bir bölümde web sayfasına medya ekleme hakkında daha fazla bilgi edineceksiniz. Öncelikle, <video> öğesine birden fazla dosya yüklemekten daha fazlasını yapmak istiyorsanız multimedya akışı için birkaç kullanım örneğini bilmeniz gerekir.

• Uyarlanabilir akış, medya parçalarının birkaç bit hızında kodlandığı ve istemcinin şu anda kullanılabilen 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 diğer medyaların (ör. reklamlar) bir akışa yerleştirildiği yerdir.

Akış protokolleri

Web'de en sık kullanılan iki akış protokolü, HTTP Üzerinden Dinamik Uyarlanabilir Akış (DASH) ve HTTP Canlı Akışı (HLS) şeklindedir. Bu protokolleri destekleyen oynatıcılar, oluşturulan manifest dosyasını getirir, hangi medya parçalarının isteneceğini belirler ve daha sonra, son medya deneyiminde bir araya getirir.

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

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

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

Eksik gibi görünen bir güç aslında gizlenmiş bir güçtür. Akışlar güçlüdür ve akış tüketen uygulamaların farklı ihtiyaçları vardır.

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

Bazı uygulamalar daha büyük miktarda videoyu arabelleğe almayı, bazıları ise yaklaşan bölümden videonun ilk birkaç saniyesini önceden getirmek, bazıları ise uyarlanabilir akış için kendi mantığını uygulamak isteyebilir. Burada, oynatma amacıyla medya akışları oluşturmak için yerleşik bir tarayıcı özelliğine sahip olmak istersiniz ve bu tam da burası.

Medya Kaynağı Uzantıları

Neyse ki W3C, Medya Kaynağı Uzantıları (MSE) adı verilen ve JavaScript'in medya akışlarımızı oluşturmasına olanak tanıyan bir özellik tanımlamıştır. Özetle MSE, geliştiricilerin <video> öğesine bir MediaSource nesnesi eklemelerine ve MediaSource örneğine ekli arabelleklere pompalanan medya verilerini oynatmalarını sağlar.

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ç durum gösterilmektedir:

• <video> söz konusu olduğunda bir URL'den medya verileri 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, örneğin fetch kullanarak ikili medya verilerini arabelleğe ekliyoruz.

Bu temel kavramlar basit olup sıfırdan DASH ve HLS uyumlu video oynatıcı yazmak mümkün olsa da çoğu kişi genellikle Shaka Player, JW Player veya Video.js gibi olgun bir açık kaynak çözümünden birini seçer.

Ancak, sadece basit <video> öğesini kullanarak çevrimdışı medya oynatma sağlayan kendi temel medya akış web sitenizi nasıl geliştireceğinizi gösteren, Kino adlı bir demo Medya PWA'sı oluşturduk. Yol haritamızda, diğer özelliklerin yanı sıra çerçeveleri ve dijital hak yönetimini destekleyecek planlar da var. Bu nedenle, zaman zaman güncellemeler olup olmadığını kontrol edin veya bir özellik isteğinde bulunun. Çevrimdışı akış özellikli PWA makalesinden daha fazla bilgi edinebilirsiniz.

Medya parçaları biçimi

DASH ve HLS, uzun bir süre boyunca medya parçalarının 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ı desteği eklendi.

fMP4 kapsayıcısını ve H.264 codec'ini kullanan video parçaları, her iki protokol tarafından desteklenir ve oyuncuların büyük çoğunluğu tarafından oynatılabilir. Bu, içerik üreticilerinin videolarını yalnızca bir kez kodlamasını sağlayarak zamandan ve disk alanından tasarruf sağlar.

Daha yüksek kalite 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, çok ileri gitmeden önce Medya dosyalarını web için nasıl hazırlayacağınızı öğrenmeniz gerekir, sıradaki aşamadır.