DOMException - play() isteği kesintiye uğradı

François Beaufort

Chrome Geliştirici Araçları'nda bu beklenmeyen medya hatasıyla mı karşılaştınız? JavaScript Konsolu mu?

veya

O zaman doğru yerdesiniz. Korkmayın. Bu hatanın nedenini ve bu sorunu nasıl düzelteceğinizi açıklayacağız.

Bunun nedeni nedir?

Aşağıda "Yakalanmadı (sözüyle)" kodunu yeniden oluşturan bir JavaScript kodu gösterilmektedir gördüğünüz hata:

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
  video.play(); // <-- This is asynchronous!
  video.pause();
</script>

Yukarıdaki kod, Chrome Geliştirici Araçları'nda şu hata mesajıyla sonuçlanır:

_Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Video, preload="none" nedeniyle yüklenmediğinden video oynatılamıyor her zaman video.play() yürütüldükten hemen sonra başlamalıdır.

Ayrıca, Chrome 50 sürümünden itibaren, <video> veya <audio> cihazında play() araması öğesi, tek bir sonuç döndüren bir işlev olan Promise döndürür. eşzamansız olarak ayarlayabilirsiniz. Oynatma başarılı olursa sözler gerçekleşir. playing etkinlik aynı anda tetiklenir. Oynatma başarısız olursa Promise ve hata mesajını içeren bir hata mesajı görüntülenir.

Peki, şimdi neler olacağı:

1. video.play(), video içeriğini eşzamansız olarak yüklemeye başlar.
2. video.pause(), henüz hazır olmadığı için videonun yüklenmesini kesintiye uğratıyor.
3. video.play(), eşzamansız olarak yüksek sesle reddeder.

Kodumuzda video oynatma Promise işlemini işlemediğimiz için bir hata mesajı Chrome Geliştirici Araçları'nda görünür.

Nasıl giderilir?

Artık kök nedeni anladığımıza göre bunu düzeltmek için neler yapabileceğimize bakalım.

Öncelikle, bir medya öğesinin (video veya ses) oynatılacağını asla varsaymayın. Dikkat play işlevi tarafından döndürülen Promise'in reddedilip reddedilmediğini kontrol edin. Evet emin olunması gerekir. Taahhüt, oynatma işlemi gerçekten tamamlanana kadar başlatılmıştır. then() içindeki kod, medya dosyası oluşturulana kadar yürütülmeyecektir. çalıyor.

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
  // Show loading animation.
  var playPromise = video.play();

  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>

<video id="video" preload="none" src="https://example.com/file.mp4"></video>
 
<script>
  // Show loading animation.
  var playPromise = video.play();
 
  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
      // We can now safely pause video...
      video.pause();
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
</script>

Bu basit örnek için çok iyi bir seçim. Ancak bir retrospektif toplantısı için video.play() daha sonra izleyebilir misiniz?

Sana bir sır söyleyeyim. video.play() kullanmak zorunda değilsiniz, video.load() ve nasıl yapılacağı aşağıda anlatılmıştır:

<video id="video"></video>
<button id="button"></button>

<script>
  button.addEventListener('click', onButtonClick);

  function onButtonClick() {
    // This will allow us to play video later...
    video.load();
    fetchVideoAndPlay();
  }

  function fetchVideoAndPlay() {
    fetch('https://example.com/file.mp4')
    .then(response => response.blob())
    .then(blob => {
      video.srcObject = blob;
      return video.play();
    })
    .then(_ => {
      // Video playback started ;)
    })
    .catch(e => {
      // Video playback failed ;(
    })
  }
</script>

Play taahhüt desteği

HTMLMediaElement.play(), metin yazıldığı sırada bir söz vereceğini söylüyor: Chrome, Edge, Firefox, Opera ve Safari.

Tehlike bölgesi

<video> içindeki <source>, play() sözünün asla reddedilmemesine neden oluyor

<video src="not-existing-video.mp4"\> için play() taahhüdü şu şekilde reddedilir: olması beklenir. <video><source src="not-existing-video.mp4" type='video/mp4'></video> için play() taahhüdü hiçbir zaman reddetmez. Bu durum yalnızca geçerli kaynak olmadığında gerçekleşir.

Chromium Hatası