Medya akışıyla ilgili temel bilgiler

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

Bu makalede, daha gelişmiş medya kavramını öğreneceksiniz. yardımcı olacak pek çok farklı araç mevcut olabilir ve akış kullanım alanları, protokoller ve uzantılardır. Arkadaş Bitkiler projesinin tam olarak ne olduğuna dair bir açıklama yapıyor.

Medya akışı, medya içeriğini otomatik olarak yapalım. Tek bir dosya yüklemek yerine. Bu işlem, optimize edilmediğinde yavaşlayabilir. oynatıcı, hedef medyanın nasıl çalıştığını açıklayan bir manifest dosyası bağımsız veri parçalarına bölünüyordu. Medya parçaları daha sonra dinamik olarak birleştirilir büyük olasılıkla farklı bit hızlarında tekrar birleştirir. Bu bit hızlarını daha sonra değineceğiz.

Web sitenizde akış sağlamak için sunucuya Aralık HTTP istek başlığını desteklemelidir. Accept-Ranges hakkında daha fazla bilgi <video> ve <source> etiketleri makalesini inceleyin.

Akış kullanım alanları

Medya parçaları ve akışı açıklayan gerekli manifestlerin üretilmesi yasaktır. basit ama kullanıcılar sürekli e-posta gönderip almamalarını yalnızca bir <video> öğesine işaret ederek gerçekleştirilemez. bir kaynak koduna ekleyebilirsiniz. Bu kursun ilerleyen bölümlerinde bir web sayfasına medya eklemeniz gerekir. Öncelikle, projenizin yalnızca bir sunumdan daha fazlasını yapmak istiyorsanız, çoklu ortam <video> öğesine birden fazla dosya yüklemek.

  • Uyarlanabilir akış, medya parçalarının birkaç sayfada kodlandığı yerdir. bit hızları ve istemcinin profiline uyar en yüksek kaliteli medya parçasını medya oynatıcıya geri döndürülür.
  • Canlı yayın, medya parçalarının kodlandığı ve kullanıldığı zaman yardımcı olur.
  • Medya yerleştirme, reklam gibi diğer medyaların oynatıcının medya kaynağını değiştirmesine gerek kalmadan bir akış gerçekleştirebilirsiniz.

Akış protokolleri

Web'de en yaygın olarak kullanılan iki akış protokolü Dinamik HTTP üzerinden Uyarlanabilir Akış (DASH) ve HTTP Canlı Yayın (HLS). Bu protokolleri destekleyen oynatıcılar, oluşturulan manifest dosyasını getirir ve hangi medya parçalarının isteneceğini bulmak ve bunları nihai medya deneyimi.

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

Birçok tarayıcı, akışınızı yerel olarak oynatmaz. Projenin gidişatı boyunca HLS oynatma için yerel destek sunar. Tarayıcılar genellikle yerel DASH'i desteklemez akış oynatma. Bu durumda, çoğu zaman sadece <source> kodunu yönlendirmek yeterli olmaz. bir manifest dosyasına koyabilirsiniz.<video>

<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 ve akışlarla tüketen uygulamaların farklı ihtiyaçları olabilir.

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

Bazı uygulamalar daha fazla videoyu arabellekte tutmak isteyebilir. başkaları ileride başka bir videonun ilk birkaç saniyesini önceden getirmek birkaçı var ve bazıları uyarlanabilir akış için kendi mantığını uygulamak istiyor. Burada yerleşik tarayıcı özelliklerinden yararlanmanız gerekir. oynatmaya uygun bir medya akışı oluşturmak gerçekten çok önemlidir.

Medya Kaynağı Uzantıları

Neyse ki W3C, Medya Kaynağı Uzantıları (MSE) adı verilen bir yöntemi tanımladı. JavaScript'in medya akışlarımızı oluşturmasını sağlar. Kısaca özetlemek gerekirse MSE, bir <video> öğesine MediaSource nesnesi eklemesi ve arka belleğe eklenmiş tamponlara aktarılan medya verilerini MediaSource örneği.

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 kullanılıyor.

Bu temel kavramlar basit olsa da bir elektronik tablo yazmak mümkün olsa da DASH ve HLS uyumlu video oynatıcı sıfırdan başlar. Çoğu kişi genellikle bir video oynatıcı seçer Shaka Player gibi zaten mevcut olan olgun açık kaynaklı çözümlerin JW Player veya Video.js örnek olarak verilebilir.

Ancak Kino adında bir demo Medya PWA oluşturduk. Bu demoda size özel bir medya akışı web sitesi oluşturmanıza sadece basit <video> öğesini kullanarak çevrimdışı medya oynatabilirsiniz. Planlar var çerçeveleri ve dijital hak yönetimini desteklemek için yol haritamızda özellikleri. 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 boyunca farklı biçimlerinden biridir. Ancak 2016'da standart parçalı MP4 (fMP4) dosyaları için destek , DASH'in de desteklediği bir biçim olan HLS'ye eklendi.

fMP4 kapsayıcısı ve H.264 codec'i kullanan video parçaları desteklenir ve oyuncuların büyük çoğunluğu tarafından oynanabilir. Bu da içerik üreticilerinin videolarını yalnızca bir kez kodlamalarına olanak tanıyarak zamandan tasarruf sağlar. ve disk alanı hakkında daha fazla bilgi edinin.

Daha iyi kalitede ve daha küçük dosya boyutlarına ulaşmak için VP9 gibi daha verimli biçimler kullanarak birkaç medya parçası grubunu kodlamak, Ancak, aşamaya geçmeden önce projenin başarısı için Medya dosyalarını web için hazırlayın. Sıra buya geliyor.