Fix Uncaught (in promise) DOMException: The play() request was interrupted because video-only background media was paused to save power

Example: Autoplay

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

Example: Play & Pause

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

Example: Fetch & Play

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

• Rajab Natshah → committed 04e0dc7f on 10.0.x authored by Rahaf Albawab →

  Issue #3354558 by Rahaf Albawab: Fix Uncaught (in promise) DOMException...

• Rajab Natshah → committed 6da71f7b on 9.0.x authored by Rahaf Albawab →

  Issue #3354558 by Rahaf Albawab: Fix Uncaught (in promise) DOMException...

• Rajab Natshah → committed 5b077b5e on 9.0.x

  Issue #3354558: Fix Uncaught (in promise) DOMException: The play()...

• Rajab Natshah → committed cd4f03ea on 10.0.x

  Issue #3354558: Fix Uncaught (in promise) DOMException: The play()...

• Rajab Natshah → committed 698f9714 on 9.0.x

  Issue #3354558: Fix Uncaught (in promise) DOMException: The play()...

• Rajab Natshah → committed 62514de7 on 10.0.x

  Issue #3354558: Fix Uncaught (in promise) DOMException: The play()...

• Rajab Natshah → committed 1b82cdf8 on 9.0.x

  Issue #3354558: Fix Uncaught (in promise) DOMException: The play()...