DOMException - Permintaan play() terganggu

François Beaufort
François Beaufort
GitHub

Apakah Anda baru saja menemukan error media yang tidak terduga ini di Konsol JavaScript Chrome DevTools?

atau

Anda berada di tempat yang tepat. Jangan takut. Saya akan menjelaskan penyebabnya dan cara memperbaikinya.

Penyebabnya

Berikut adalah beberapa kode JavaScript di bawah yang mereproduksi error "Unrestricted (in promise)" yang Anda lihat:

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

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

Kode di atas menghasilkan pesan error di Chrome DevTools:

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

Karena video tidak dimuat karena preload="none", pemutaran video tidak harus dimulai segera setelah video.play() dijalankan.

Selain itu, sejak Chrome 50, panggilan play() pada elemen <video> atau <audio> akan menampilkan Promise, fungsi yang menampilkan satu hasil secara asinkron. Jika pemutaran berhasil, Promise akan terpenuhi dan peristiwa playing akan diaktifkan secara bersamaan. Jika pemutaran gagal, Promise akan ditolak beserta pesan error yang menjelaskan kegagalan tersebut.

Inilah yang terjadi:

  1. video.play() mulai memuat konten video secara asinkron.
  2. video.pause() mengganggu pemuatan video karena belum siap.
  3. video.play() menolak dengan keras secara asinkron.

Karena kita tidak menangani Promise pemutaran video dalam kode, pesan error akan muncul di Chrome DevTools.

Cara memperbaikinya

Setelah memahami akar masalahnya, mari kita lihat apa yang dapat kita lakukan untuk memperbaikinya.

Pertama, jangan pernah berasumsi bahwa elemen media (video atau audio) akan diputar. Lihat Promise yang ditampilkan oleh fungsi play untuk melihat apakah Promise ditolak. Perlu diperhatikan bahwa Promise tidak akan terpenuhi sampai pemutaran benar-benar dimulai, yang berarti kode di dalam then() tidak akan dieksekusi sampai media diputar.

Anjuran

Contoh: Putar otomatis

<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>
Anjuran

Contoh: Putar & Jeda

<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>

Itu bagus untuk contoh sederhana ini, tetapi bagaimana jika Anda menggunakan video.play() agar dapat memutar video nanti?

Aku akan memberitahumu sebuah rahasia. Anda tidak perlu menggunakan video.play(). Anda dapat menggunakan video.load() dan berikut caranya:

Anjuran

Contoh: Ambil & Putar

<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>

Dukungan promise Play

Pada saat penulisan, HTMLMediaElement.play() menampilkan promise di Chrome, Edge, Firefox, Opera, dan Safari.

Zona bahaya

<source> dalam <video> membuat play() promise tidak akan pernah ditolak

Untuk <video src="not-existing-video.mp4"\>, promise play() akan ditolak seperti yang diharapkan karena video tidak ada. Untuk <video><source src="not-existing-video.mp4" type='video/mp4'></video>, promise play() tidak pernah ditolak. Hal ini hanya terjadi jika tidak ada sumber yang valid.

Bug Chromium