Medya Kaynağı API'sı - Medya segmentlerinin ekli sırayla sorunsuz bir şekilde oynatılmasını sağlar

Sam Dutton

HTML ses ve video öğeleri, yalnızca bir src URL'si sağlayarak medya yüklemenizi, kodlarını çözmenizi ve oynatmanızı sağlar:

    <video src='foo.webm'></video>

Bu yöntem basit kullanım alanlarında iyi sonuç verir ancak uyarlanabilir akış gibi teknikler için Media Source Extensions API (MSE) daha fazla kontrol sağlar. MSE, ses veya video segmentlerinden JavaScript'te yayın oluşturmayı sağlar.

MSE'yi simpl.info/mse adresinden deneyebilirsiniz:

MSE API kullanılarak oynatılan videonun ekran görüntüsü.

Aşağıdaki kod bu örnekten alınmıştır.

MediaSource, bir ses veya video öğesi için medya kaynağını temsil eder. Bir MediaSource nesnesi oluşturulduktan ve open etkinliği tetiklendikten sonra SourceBuffer öğeleri buna eklenebilir. Bunlar, medya segmentleri için tampon görevi görür:

var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
    var sourceBuffer =
        mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    // Get video segments and append them to sourceBuffer.
}

Medya segmentleri, her segment appendBuffer() ile bir SourceBuffer'e eklenerek bir ses veya video öğesine "aktarılır". Bu örnekte, video sunucudan alınır ve ardından Dosya API'leri kullanılarak depolanır:

reader.onload = function (e) {
    sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
    if (i === NUM_CHUNKS - 1) {
    mediaSource.endOfStream();
    } else {
    if (video.paused) {
        // start playing after first chunk is appended
        video.play();
    }
    readChunk(++i);
    }
};

Oynatma sırasını ayarlama

Chrome 50, SourceBuffer mode özelliğine ek destek ekleyerek medya segmentlerinin başlangıçta kesintisiz zaman damgaları olup olmadığına bakılmaksızın, medya segmentlerinin eklendikleri sırayla sürekli olarak oynatılmasını belirtmenize olanak tanır.

Medya segmentlerinin oynatma sırasını belirtmek için mode özelliğini kullanın. İki değerden birine sahiptir:

  • segments: Her segmentin zaman damgası (timestampOffset tarafından değiştirilmiş olabilir), segmentlerin eklenme sırasına bakılmaksızın oynatma sırasını belirler.
  • sequence: Medya zaman çizelgesinde arabelleğe alınan segmentlerin sırası, segmentlerin SourceBuffer öğesine eklenme sırasına göre belirlenir.

Medya segmentleri, SourceBuffer'ye eklenirken bayt akışı verilerinden ayrıştırılan zaman damgalarına sahipse SourceBuffer'nin mode mülkü segments olarak ayarlanır. Aksi takdirde mode, dize olarak ayarlanır. Zaman damgalarının isteğe bağlı olmadığını unutmayın: Çoğu yayın türü için olmalıdır ve diğerlerinde olamaz: Bant içi zaman damgaları, bunları içeren yayın türlerine özgüdür.

mode özelliğini ayarlamak isteğe bağlıdır. Zaman damgası içermeyen akışlar (audio/mpeg ve audio/aac) için mode yalnızca segments değerinden sequence değerine değiştirilebilir: mode değerini sequence değerinden segments değerine değiştirmeye çalışırsanız hata mesajı gösterilir. Zaman damgası içeren yayınlar için segmentler ve dize arasında geçiş yapmak mümkündür. Ancak pratikte bu, istenmeyen, anlaşılması veya tahmin edilmesi zor bir davranışa neden olabilir.

Tüm akış türleri için değeri segmentler yerine sıralama olarak değiştirebilirsiniz. Bu durumda, segmentler eklendikleri sırayla oynatılır ve buna göre yeni zaman damgaları oluşturulur:

sourceBuffer.mode = 'sequence';

mode değerini sıralı olarak ayarlayabilmek, medya segmenti zaman damgalarının kesintili olup olmadığına bakılmaksızın (ör. video birleştirme ile ilgili sorunlar varsa veya herhangi bir nedenle kesintisiz olmayan segmentler eklenmişse) kesintisiz medya oynatılmasını sağlar. Doğru akış meta verileri mevcutsa bir uygulamanın kesintisiz oynatmayı sağlamak için timestampOffset ile polyfill yapması mümkündür ancak sıralı modu süreci daha basit ve hatalara daha az eğilimli hale getirir.

MSE uygulamaları ve demolar

Aşağıdaki resimlerde, SourceBuffer.mode manipülasyonu olmadan MSE'nin işleyişi gösterilmektedir:

Tarayıcı desteği

  • Varsayılan olarak Chrome 50 ve sonraki sürümler
  • Firefox ile ilgili ayrıntılar için MDN bölümüne bakın

Spesifikasyon

API bilgileri