Web'de ses ve videoyu otomatik olarak oynatma, güçlü bir özelliktir ve farklı platformlarda farklı kısıtlamalara tabidir.
Günümüzde çoğu masaüstü tarayıcısı, web sayfalarının kullanıcı etkileşimi olmadan JavaScript aracılığıyla <video> veya <audio> oynatmaya başlamasına her zaman izin verir.
Ancak çoğu mobil tarayıcıda, JavaScript tarafından başlatılan oynatma işleminin gerçekleşebilmesi için kullanıcının açık bir hareketi gerekir. 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şime geçmeden yanlışlıkla medya indirip oynatmaya başlamasını önler.
Geçmişte oynatmanın başlatılması için kullanıcı etkileşiminin gerekip gerekmediğini belirlemek ve (otomatik) oynatma denemesi yapıldığında ve başarısız olduğunda oluşan hataları tespit etmek zordu. Çeşitli geçici çözümler mevcuttur ancak bunlar ideal değildir. Bu belirsizliği gidermek için temel play() yönteminde bir iyileştirme yapılmasının üzerinden çok zaman geçti. Bu iyileştirme, Chrome 50'de ilk kez uygulanarak web platformuna eklendi.
<video> veya <audio> öğesinde play() çağrısı artık bir Promise döndürüyor. Oynatma başarılı olursa Promise yerine getirilir. Oynatma başarısız olursa Promise, hatayı açıklayan bir hata mesajıyla birlikte reddedilir. Bu sayede aşağıdaki gibi sezgisel kodlar yazabilirsiniz:
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 söze dayalı arayüz, play() yönteminin başarılı olup olmadığını tespit etmenin yanı sıra play() yönteminin ne zaman başarılı olduğunu belirlemenize de olanak tanır. Bir web tarayıcısının oynatmanın başlangıcını ertelemeyi seçebileceği bağlamlar vardır. Örneğin, masaüstü Chrome, sekme görünür hale gelene kadar <video> oynatmaya başlamaz. Sözleşme, oynatma gerçekten başlatılana kadar yerine getirilmez. Yani then() içindeki kod, medya oynatılana kadar yürütülmez. play()'ün başarılı olup olmadığını belirlemek için kullanılan önceki yöntemler (ör. playing etkinliği için belirli bir süre beklemek ve etkinliğin tetiklenmemesi durumunda başarısız olduğunu varsaymak) gecikmeli oynatma senaryolarında yanlış negatif sonuçlara yol açabilir.
Bu yeni işlevin canlı örneğini yayınladık. Söze dayalı arayüzü destekleyen Chrome 50 gibi bir tarayıcıda görüntüleyin. Bu sayfayı ziyaret ettiğinizde otomatik olarak müzik çalınır. (Tabii ki bu durum söz konusu değilse!)
Tehlike bölgesi
<video> içindeki <source>, play()'nin hiçbir zaman reddetmeyeceğini vaat eder
<video src="not-existing-video.mp4"\> için video mevcut olmadığından play() vaadi beklendiği gibi reddedilir. <video><source src="not-existing-video.mp4" type='video/mp4'></video> için play() vaadi hiçbir zaman reddetmez. Bu durum yalnızca geçerli kaynak yoksa ortaya çıkar.