Reset an HTML5 <video> element so it can be reused. Avoids race condition with setMediaKeys.

unloadVideoElt.js

/*
 * Unload any previous media and keys from <video> element
**/
const resetVideoElt = async (videoElt) => {
  const videoEltEmptied= new Promise((resolve) => { videoElt.addEventListener('emptied', (e) => {
    //console.log(e);
    resolve();
  }, { once: true }) });

  videoElt.pause();
  videoElt.src = '';
  videoElt.removeAttribute('src');
  await videoEltEmptied;
  videoElt.load();
  console.log('Video unloaded.');

  await new Promise((resolve) => setTimeout(resolve, 10));

  // Try to clear media keys until we succeed. Attempting to clear media keys while encrypted
  // video is playing or a setMediaKeys() call is already in progress results in error:
  //   Failed to execute 'setMediaKeys' on 'HTMLMediaElement': Another request is in progress.
  await (async () => {
    let backoff = 10;
    while (true) {
      try {
        await videoElt.setMediaKeys(null);
        console.log('Cleared media keys.');
        return;
      } catch (e) {
        console.log('Race condition clearing media keys, will retry.');
        await new Promise((resolve) => setTimeout(resolve, backoff));
        backoff *= 2;
      }
    }
  })();
};