HTMLMediaElement.play() menampilkan promise

Jeff Posnick

Memutar audio dan video secara otomatis di web adalah kemampuan yang canggih, dan dapat memiliki berbagai batasan pada berbagai platform. Saat ini, sebagian besar browser desktop akan selalu mengizinkan halaman web untuk memulai pemutaran <video> atau <audio> melalui JavaScript tanpa interaksi pengguna. Namun, sebagian besar browser seluler memerlukan gestur pengguna eksplisit sebelum pemutaran yang dimulai JavaScript dapat terjadi. Hal ini membantu memastikan bahwa pengguna seluler, yang kebanyakan membayar bandwidth atau yang mungkin berada di lingkungan publik, tidak mulai mendownload dan memutar media secara tidak sengaja tanpa berinteraksi secara eksplisit dengan halaman.

Secara historis, sulit untuk menentukan apakah interaksi pengguna diperlukan untuk memulai pemutaran, dan untuk mendeteksi kegagalan yang terjadi saat pemutaran (otomatis) dicoba dan gagal. Ada berbagai solusi, tetapi kurang ideal. Peningkatan pada metode play() yang mendasarinya untuk mengatasi ketidakpastian ini sudah lama menunggu, dan peningkatan ini kini telah diterapkan ke platform web, dengan implementasi awal di Chrome 50.

Panggilan play() pada elemen <video> atau <audio> sekarang menampilkan Promise. Jika pemutaran berhasil, Promise akan terpenuhi, dan jika pemutaran gagal, Promise akan ditolak beserta pesan error yang menjelaskan kegagalan tersebut. Hal ini memungkinkan Anda menulis kode intuitif seperti berikut:

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.
    });
}

Selain mendeteksi apakah metode play() berhasil, antarmuka berbasis Promise yang baru memungkinkan Anda menentukan kapan metode play() berhasil. Ada konteks saat browser web dapat memutuskan untuk menunda awal pemutaran—misalnya, Chrome desktop tidak akan memulai pemutaran <video> hingga tab terlihat. Promise tidak akan terpenuhi hingga pemutaran benar-benar dimulai, yang berarti kode di dalam then() tidak akan dieksekusi hingga media diputar. Metode sebelumnya untuk menentukan apakah play() berhasil, seperti menunggu selama jangka waktu tertentu untuk peristiwa playing dan mengasumsikan kegagalan jika tidak diaktifkan, rentan terhadap negatif palsu dalam skenario pemutaran tertunda.

Kami telah memublikasikan contoh aktif fungsi baru ini. Lihat di browser seperti Chrome 50 yang mendukung antarmuka berbasis Promise ini. Peringatan: halaman akan otomatis memutar musik saat Anda membukanya. (Kecuali, tentu saja, tidak).

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