Medya akışıyla ilgili temel bilgiler

Derek Herman
Derek Herman
X GitHub
Jaroslav Polakovič
Jaroslav Polakovič
X GitHub

Bu makalede, medya aktarımıyla ilgili daha gelişmiş bir kavram hakkında bilgi edineceksiniz. Makalenin sonunda, çeşitli aktarma kullanım alanları, protokolleri ve uzantılarını iyi anlamış olacaksınız. Öncelikle, akış özelliğinin ne olduğuna dair bir açıklamayla başlayalım.

Medya aktarımı, medya içeriğini parça parça yayınlama ve oynatma yöntemidir. Oynatıcı, ağ için optimize edilmemişse yavaş olabilecek 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 Range HTTP istek üst bilgisini 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 çeşitli bit hızlarında kodlandığı ve istemcinin mevcut bant genişliğine uygun en yüksek kaliteli medya parçasının medya oynatıcıya döndürüldüğü bir akış türüdür.
  • Canlı yayın, medya parçalarının kodlandığı ve gerçek zamanlı olarak kullanıma sunulduğu yerdir.
  • Medya ekleme, oynatıcının medya kaynağını değiştirmesi gerekmeden reklamlar gibi diğer medyaların bir yayına eklenmesidir.

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 belirler ve ardından 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 destekler olsa da tarayıcılar genellikle yerel DASH akış oynatmayı desteklemez. Bu nedenle, genellikle <video> öğesindeki <source> öğesini bir manifest dosyasına yönlendirmek yeterli değildir.

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

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

Manifest dosyaları genellikle tek bir medyanın birçok varyantını tanımlar. Farklı bit hızları, birden fazla ses kanalı ve hatta aynı medyanın farklı biçimlerde kodlanmış olması gibi durumları düşünün.

Bazı uygulamalar arabellekte daha fazla video tutmak, bazıları yaklaşan bir bölümün ilk birkaç saniyesini önceden almak, bazıları da uyarlanabilir akış için kendi mantıklarını uygulamak isteyebilir. Bu noktada, oynatılacak medya akışları oluşturmak için bir tür yerleşik tarayıcı özelliğine sahip olmak istersiniz. Bu tür bir özellik de mevcuttur.

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 şey 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österilmektedir:

  • <video>, bir URL'den medya verileri alıyor.
  • Oluşturulan URL yalnızca bir MediaSource örneğini işaret eder.
  • MediaSource örneği, bir veya daha fazla SourceBuffer örneği oluşturur.
  • Ardından, fetch gibi bir yöntem kullanarak arabelleğe ikili medya verileri eklememiz yeterlidir.

Bu temel kavramlar basittir ve sıfırdan DASH ve HLS uyumlu bir video oynatıcı yazmak kesinlikle mümkündür. Ancak çoğu kişi genellikle Shaka Player, JW Player veya Video.js gibi halihazırda mevcut olan gelişmiş açık kaynak çözümlerden birini tercih eder.

Bununla birlikte, yalnızca basit <video> öğesini kullanarak çevrimdışı medya oynatma özelliği sunan 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 destekleme planları var. Bu nedenle, güncellemeler için zaman zaman bu sayfayı kontrol edin veya bir özellik isteyin. Bu konu hakkında daha fazla bilgiyi Çevrimdışı akış içeren PWA makalesinde bulabilirsiniz.

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çalanmış MP4 (fMP4) dosyaları için destek eklendi.

fMP4 kapsayıcısını ve H.264 codec'ini kullanan video parçaları hem protokoller tarafından desteklenir hem de oynatıcıların büyük bir çoğunluğu tarafından oynatılabilir. Bu sayede içerik üreticiler videolarını yalnızca bir kez kodlayabilir. Bu da zaman ve disk alanı tasarrufu sağlar.

Daha iyi 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, bu konuda fazla ilerlemeden önce Medya dosyalarını web için hazırlamayı öğrenmeniz gerekir, şimdi sıra bize geliyor.