Medya akışıyla ilgili temel bilgiler

Derek Herman
Derek Herman
Jaroslav Polakovič
Jaroslav Polakovič

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ını okur. Medya parçaları daha sonra çalışma zamanında dinamik olarak tekrar birleştirilir. Bu işlem muhtemelen farklı bit hızlarında gerçekleşir. Bu konu hakkında daha sonra bilgi edineceksiniz.

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

Akış kullanım alanları

Medya parçaları ve aktarımı açıklayan gerekli manifest'leri oluşturmak tam olarak kolay değildir ancak aktarma, yalnızca bir <video> öğesini statik kaynak dosyalara yönlendirerek elde edilemeyecek bazı ilginç kullanım alanları sunar. Web sayfasına medya ekleme hakkında daha fazla bilgiyi sonraki bölümde bulabilirsiniz. <video> öğesine birden fazla dosya yüklemekten daha fazlasını yapmak istiyorsanız öncelikle multimedya akışıyla ilgili birkaç kullanım alanından haberdar olmanız 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 yaygın olarak kullanılan iki akış protokolü HTTP üzerinden Dinamik Adaptif 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>'ü kullanma

Birçok tarayıcı, yayınınızı doğal 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.

Bildiri 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ı. Özetlemek gerekirse MSE, geliştiricilerin bir MediaSource nesnesini bir <video> öğesine eklemesine ve MediaSource örneğine bağlı arabelleklere aktarılan tüm medya verilerini oynatması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ğine işaret eden bir işaretçidir.
  • MediaSource örneği bir veya daha fazla SourceBuffer örneği oluşturur.
  • Ardından, fetch gibi bir yöntem kullanarak arabelleğe ikili medya verilerini 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 halihazırda mevcut olan gelişmiş açık kaynak çözümlerden birini (ör. Shaka Player, JW Player veya Video.js) 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çimleri kullanarak çeşitli medya parçaları gruplarını kodlamayı seçebilirsiniz. Ancak daha ileri gitmeden önce medya dosyalarını web için hazırlamayı öğrenmeniz gerekir. Bu konuyu bir sonraki bölümde ele alacağız.