HTMLMediaElement.play() menampilkan promise

Jeff Posnick

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

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

Panggilan play() pada elemen <video> atau <audio> kini menampilkan Promise. Jika pemutaran berhasil, Promised akan terpenuhi, dan jika pemutaran gagal, Promised 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 jangka waktu tertentu untuk peristiwa playing dan mengasumsikan kegagalan jika tidak terpicu, rentan terhadap negatif palsu dalam skenario pemutaran tertunda.

Kami telah memublikasikan contoh langsung fungsi baru ini. Lihat di browser seperti Chrome 50 yang mendukung antarmuka berbasis Promise ini. Perhatikan: halaman akan otomatis memutar musik saat Anda membukanya. (Tentu saja, jika tidak!)

Zona bahaya

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

Untuk <video src="not-existing-video.mp4"\>, promise play() 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