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

Kişi adı

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

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

Bu, basit kullanım alanlarında işe yarar ancak uyarlanabilir akış gibi teknikler için Media Kaynağı Uzantıları API'si (MSE) daha fazla kontrol sağlar. MSE, ses veya video segmentlerinden JavaScript'te akışların oluşturulmasına olanak tanır.

MSE'yi simpl.info/mse adresinden deneyebilirsiniz:

Videonun MSE API&#39;si kullanılarak oynatıldığı ekran görüntüsü.

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

MediaSource, bir ses veya video öğesine ilişkin medya kaynağını temsil eder. Bir MediaSource nesnesi örneklendikten ve open etkinliği tetiklendikten sonra nesneye SourceBuffer 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() içeren bir SourceBuffer öğesine eklenerek bir ses veya video öğesine "yayınlanır". Bu örnekte video sunucudan getirilip Dosya API'leri kullanılarak depolanmaktadı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 kesintili zaman damgalarına sahip olup olmadığına bakılmaksızın, medya segmentlerinin eklendikleri sırayla kesintisiz olarak oynatıldığını belirtmenizi sağlar.

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

  • segments: Segmentlerin eklendiği sıradan bağımsız olarak, her segmentin zaman damgası (timestampOffset tarafından değiştirilmiş olabilir) 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 segmentlerinin, SourceBuffer öğesine eklendiğinde bayt akış verilerinden ayrıştırılan zaman damgaları varsa SourceBuffer'in mode özelliği, segmentler olarak ayarlanır. Aksi takdirde mode, sıra olarak ayarlanır. Zaman damgalarının isteğe bağlı olmadığını unutmayın. Zaman damgalarının çoğu akış türünde olması zorunludur, diğerleri için de bulunamaz. Bant içi zaman damgaları, bunları içeren akış türlerinin doğasında vardır.

mode özelliğini ayarlamak isteğe bağlıdır. Zaman damgası (ses/mpeg ve ses/aac) içermeyen akışlarda mode, yalnızca segment iken dizi olarak değiştirilebilir: mode değerini dizi yerine segment olarak değiştirmeyi denerseniz hata verilir. Zaman damgası olan akışlarda segmentler ve dizi arasında geçiş yapmak mümkündür. Ancak pratikte bu şekilde muhtemelen istenmeyen, anlaşılması zor veya tahmin edilmesi zor davranışlar ortaya çıkar.

Tüm akış türlerinde segmentler olan değeri dizi olarak değiştirebilirsiniz. Bu, segmentlerin eklendikleri sırayla oynatılacağı ve yeni zaman damgalarının buna uygun olarak oluşturulacağı anlamına gelir:

sourceBuffer.mode = 'sequence';

mode değerinin sıra olarak ayarlanabilmesi, medya segmenti zaman damgalarının kesintili olup olmamasından (örneğin, videonun muhasebesi ile ilgili sorunların oluşmuş olması veya (herhangi bir nedenle) kesintili segmentlerin eklenmiş olması fark etmeksizin, medya içeriğinin kesintisiz oynatılmasını sağlar. Doğru akış meta verileri kullanılabiliyorsa bir uygulamanın kesintisiz oynatma sağlamak için timestampOffset ile çoklu doldurma yapması mümkündür. Ancak dizi modu işlemi daha basit hale getirir ve hata olasılığını azaltır.

MSE uygulamaları ve demoları

Bunlar, SourceBuffer.mode müdahalesi olmadan MSE'nin nasıl çalıştığını gösterir:

Tarayıcı desteği

  • Varsayılan olarak Chrome 50 ve sonraki sürümler
  • Firefox'ta ayrıntılar için MDN konusuna bakın

Spesifikasyon

API bilgileri