Failsafe way to programmatically play a video, falling back to muted

readme.md

https://developer.chrome.com/blog/autoplay

1. Safari will not autoplay any videos when in low power mode.
   1. Requires a user interaction, after which the remainder of autoplay videos in the page work fine.
   2. Interaction means some form of click interaction. Doesn't even matter on what.
   3. Attempting to trigger an unumuted video with the element.play() api only works after interaction. Attempting this without an interaction will throw immediately, it does NOT return a rejected promise.
   4. It's not straightforward to detect the low power behaviour happening because Safari runs through all the standard video events as if the video is playing correclty. But the very last event will be "paused" which we can use to show a button to start the interactive.
2. Chrome will always play muted autoplay videos.
3. Attempting to play an unmuted video in Chrome with element.play() will return a rejected promise.

The following code will attempt to play a video, falling back to a muted video:

tryplay.js

/**
 * Try to play a video, falling back to a muted video.
 * @param {HTMLMediaElement} video
 */
async function tryPlay(video) {
  try {
    await video.play();
  } catch (e) {
    video.setAttribute('muted', 'true');
    try {
      await video.play();
    } catch (e) {
      console.log('could not play muted video.');
    }
  }
}