Web video player errors All In One

Web video player errors All In One

errors

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

<script>
  video.play(); // <-- This is asynchronous!
  video.pause();
</script>

solutions

Autoplay

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

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

Play & Pause

<video id="video" preload="none" src="https://example.com/file.mp4"></video>

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

demos

Fetch & Play

<video id="video" src=""></video>
<button id="button"></button>

  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 => {
      // blob ✅
      video.srcObject = blob;
      // Promise
      return video.play();
    })
    .then(_ => {
      // Video playback started ;)
    })
    .catch(e => {
      // Video playback failed ;(
    })
  }

Danger zone

<source> within <video> makes play() promise never rejects

For <video src="not-existing-video.mp4"\>, the play() promise rejects as expected as the video doesn't exist.
For <video><source src="not-existing-video.mp4" type='video/mp4'></video>, the play() promise never rejects.
It only happens if there are no valid sources.

refs

https://developer.chrome.com/blog/play-request-was-interrupted

---

---

©xgqfrms 2012-2025

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---