Bazen iyi şeylerin sıkıcı adları olur.
Buna örnek olarak Birleştirilmiş Medya Ardışık Düzeni (kısaca UMP) verilebilir.
Bu, Sovyet döneminin uğursuz bir direktifi gibi gelebilir, ancak aslında platformlar arası tutarlı ses ve video yayını için önemli bir adımdır. Android üzerinde Chrome artık temel platform uygulamasına bağlı kalmak yerine, masaüstü Chrome ile aynı medya yığınını kullanacaktır.
UMP ile pek çok şey yapabilirsiniz:
- Medya teslimi artık Android medya yığınına yönlendirilmek yerine doğrudan Chrome'un içinde uygulandığı için hizmet çalışanlarıyla ses ve videoyu önbelleğe alın.
- Ses ve video öğeleri için blob URL'lerini kullanın.
- Ses ve video için
playbackRate
ayarlayın. - MediaStream'leri Web Audio ve MediaRecorder arasında aktarın.
- Medya uygulamalarını cihazlar arasında daha kolay bir şekilde geliştirin ve yönetin. Medya, masaüstü ve Android cihazlarda aynı şekilde çalışır.
UMP'nin uygulaması için ciddi mühendislik çalışmaları yaptık:
- İyileştirilmiş güç performansı için yeni bir önbelleğe alma katmanı.
- Chrome'un GPU işleminde barındırılan, MediaCodec tabanlı yeni bir video kod çözücüyü güncelleme.
- Farklı cihazlarda pek çok test ve yineleme.
Bir hizmet çalışanıyla videoyu önbelleğe alma demosunu burada bulabilirsiniz:
Video dosyasını ve video poster görüntüsünü önbelleğe almak için tek yapmanız gereken bunların yollarını önceden getirilecek URL listesine eklemektir:
<video controls poster="static/poster.jpg">
<source src="static/video.webm" type="video/webm" />
<p>This browser does not support the video element.</p>
</video>
var urlsToPrefetch = [
'static/video.webm', 'static/poster.jpg',
];
Android'de playbackRate
ürününün değiştirilememesi uzun zamandır devam eden bir hata. UMP bu sorunu düzeltir. simpl.info/video/playbackrate adresindeki demo için playbackRate
değeri 2 olarak ayarlanmıştır. Yenilikleri inceleyin.
UMP, medya öğeleri için blob URL'lerini etkinleştirir. Bu, örneğin, artık Android'deki bir video öğesinde MediaRecorder API'sı kullanılarak kaydedilen bir videoyu oynatabileceğiniz anlamına gelir:
İlgili kod şudur:
var recordedBlobs = [];
mediaRecorder.ondataavailable = function(event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
};
function play() {
var superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
recordedVideo.src = window.URL.createObjectURL(superBuffer);
}
simpl.info/video/offline adresindeki demo için video Dosya API'ları kullanılarak depolanır ve ardından bir Blob URL'si kullanılarak oynatılır:
function writeToFile(fileEntry, blob) {
fileEntry.createWriter(function(fileWriter) {
fileWriter.onwriteend = function() {
readFromFile(fileEntry.fullPath);
};
fileWriter.onerror = function(e) {
log('Write failed: ' + e.toString());
};
fileWriter.write(blob);
}, handleError);
}
function readFromFile(fullPath) {
window.fileSystem.root.getFile(fullPath, {}, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function() {
video.src = URL.createObjectURL(new Blob([this.result]));
};
reader.readAsArrayBuffer(file);
}, handleError);
}, handleError);
}
Birleştirilmiş Medya Ardışık Düzeni, Medya Kaynağı Uzantıları (MSE) ve Şifrelenmiş Medya Uzantıları (EME) için de etkinleştirilmiştir.
Bu, mobil ve masaüstü Chrome'u birleştirme yolunda bir adımdır. Kodunuzu değiştirmeniz gerekmez. Ancak medya yığını platformlar arasında aynı olduğundan masaüstü ve mobil genelinde tutarlı bir medya deneyimi oluşturmak artık daha kolay olacaktır. Chrome Geliştirici Araçları ile hata ayıklama Mobil emülasyon artık "gerçek" ses ve video grubunu kullanmaktadır.
Birleştirilmiş Medya Ardışık Düzeni nedeniyle sorun yaşarsanız lütfen sorunları uygulama hatası sayfasında veya new.crbug.com adresinden bildirin.
Demolar
- Hizmet çalışanı kullanarak videoyu önbelleğe alma
- Medya
playbackRate
- MediaRecorder: blob URL'si kullanarak oynatma
- File API'leri ile uygulanan çevrimdışı video
İlgili hatalar
- Birleştirilmiş Medya Ardışık Düzeni için izleme sorunları
- UMP Alan Denemesi
- MSE, EME ve Birleşik Medya Ardışık Düzeni
<video>
, hizmet çalışanları ve Cache Storage API'yi etkileyen birkaç hata var:
<video>
bir modu tetikler: Cors isteğini ve opak Service Worker yanıtını kabul etmez- Hizmet çalışanı önbelleği tarafından sunulan videolarda arama işlevi çalışmıyor
Tarayıcı desteği
- Chrome 52 ve sonraki sürümlerde varsayılan olarak etkindir.