HTMLMediaElement.play(), bir söz döndürür

Jeff Posnick

Web'de ses ve videoyu otomatik olarak oynatmak güçlü bir özelliktir ve farklı platformlarda farklı kısıtlamalara tabidir. Günümüzde çoğu masaüstü tarayıcı, web sayfalarının kullanıcı etkileşimi olmadan JavaScript aracılığıyla <video> veya <audio> oynatmasına her zaman izin vermektedir. Ancak çoğu mobil tarayıcı, JavaScript ile başlatılan oynatmanın gerçekleşmesi için önce açık bir kullanıcı hareketi gerektirir. Bu, çoğu bant genişliği için ödeme yapan veya herkese açık bir ortamda bulunan mobil kullanıcıların sayfayla açıkça etkileşimde bulunmadan yanlışlıkla medya indirip oynatmaya başlamamasını sağlar.

Oynatmayı başlatmak için kullanıcı etkileşiminin gerekli olup olmadığını belirlemek ve (otomatik) oynatma denenip başarısız olduğunda oluşan hataları tespit etmek geçmişten beri zordu. Çeşitli geçici çözümler vardır, ancak bunlar ideal çözümler değildir. Bu belirsizliği gidermek amacıyla temel play() yönteminde yapılan bir iyileştirme uzun zaman oldu ve web platformunda, ilk olarak Chrome 50'de kullanıma sunuldu.

<video> veya <audio> öğesindeki play() çağrısı artık bir Promise döndürür. Oynatma başarılı olursa söz yerine getirilmiş olur. Oynatma başarısız olursa Promise reddedilir ve hatayı açıklayan bir hata mesajı gösterilir. Bu, aşağıdaki gibi sezgisel bir kod yazmanıza olanak tanır:

var playPromise = document.querySelector('video').play();

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
    playPromise.then(function() {
    // Automatic playback started!
    }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
    });
}

Yeni Promise tabanlı arayüz, play() yönteminin başarılı olup olmadığını belirlemenin yanı sıra play() yönteminin ne zaman başarılı olduğunu belirlemenize olanak tanır. Web tarayıcısının oynatmanın başlatılmasını geciktirebileceği bağlamlar vardır. Örneğin, masaüstü Chrome, sekme görünür olana kadar bir <video> öğesini oynatmaya başlamaz. Promise, oynatma gerçekten başlatılana kadar tamamlanmaz. Diğer bir deyişle then() içindeki kod, medya oynatılana kadar yürütülmez. play() öğesinin başarılı olup olmadığını belirlemek için kullanılan eski yöntemler (ör. bir playing etkinliği için belirli bir süre beklemek ve etkinlik tetiklenmediği takdirde başarısızlık olduğunu varsaymak) geciken oynatma senaryolarında yanlış negatif sonuçlar verebilir.

Bu yeni işlevin canlı bir örneğini yayınladık. Dosyayı, bu Promise tabanlı arayüzü destekleyen Chrome 50 gibi bir tarayıcıda görüntüleyin. Dikkatli olun: Sayfayı ziyaret ettiğinizde otomatik olarak müzik çalar. (Tabii ki öyle değil!)

Tehlike bölgesi

<video> içindeki <source>, play() sözünün hiçbir zaman reddedilmemesini sağlıyor

<video src="not-existing-video.mp4"\> için play() sözü, video mevcut olmadığından beklendiği şekilde reddediliyor. <video><source src="not-existing-video.mp4" type='video/mp4'></video> için play() sözü hiçbir zaman reddedilmez. Bu durum, yalnızca geçerli kaynak olmadığında gerçekleşir.

Chromium Hatası