Question

Technologies:

javascript

html

Tolerim

20 hours ago

The play() request was interrupted by a call to pause(), resulting in an Uncaught (in promise) DOMException in JavaScript.

Can you assist me with this JavaScript code? The DOMException error, Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(), is appearing on a webpage. The following is the snippet of JS code related to it:

milano.onmouseover = VideoS;
milano.onmouseout = VideoF;
parigi.onmouseover = VideoS;
parigi.onmouseout = VideoF;
ny.onmouseover = VideoS;
ny.onmouseout = VideoF;
londra.onmouseover = VideoS;
londra.onmouseout = VideoF;
function VideoS() {
    switch (this.id) {
        case 'milano':
            video3.play();
            break
        case 'parigi':
            video4.play();
            break
        case 'ny':
            video5.play();
            break
        case 'londra':
            video6.play();
    }
}
function VideoF() {
    switch (this.id) {
        case 'milano':
            video3.pause();
            video3.currentTime = 0;
            break
        case 'parigi':
            video4.pause();
            video4.currentTime = 0;
            break
        case 'ny':
            video5.pause();
            video5.currentTime = 0;
            break
        case 'londra':
            video6.pause();
            video6.currentTime = 0;
    }
}

The functions perform as expected. However, when hovering over the div elements containing videos, the DOMException error is displayed. Is there a remedy for this issue? I observed that the error disappears when I replace onmouseover with onclick, but I prefer to maintain the interactivity of onmouseover.

Answers(1)

Accepted Answer

The error message Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() occurs when the play() method is called on a video element that is still in the process of loading or buffering. In the provided code, this happens when the mouse over and mouse out events are triggered quickly, resulting in a call to pause() interrupting a previous call to play(). To fix this error, you can add a check to see if the video is ready before calling the play() method. You can do this by adding an event listener for the canplay event on each video element and setting a data-ready attribute on the corresponding div element when the event fires. Then, in the VideoS function, you can check if the div has the data-ready attribute before calling play(). Here's an updated version of the code with these changes:

<div id="milano" data-ready="false">
  <video src="milano.mp4" id="video3"></video>
</div>
<div id="parigi" data-ready="false">
  <video src="parigi.mp4" id="video4"></video>
</div>
<div id="ny" data-ready="false">
  <video src="ny.mp4" id="video5"></video>
</div>
<div id="londra" data-ready="false">
  <video src="londra.mp4" id="video6"></video>
</div>

<script>
  const milano = document.getElementById('milano');
  const parigi = document.getElementById('parigi');
  const ny = document.getElementById('ny');
  const londra = document.getElementById('londra');
  const video3 = document.getElementById('video3');
  const video4 = document.getElementById('video4');
  const video5 = document.getElementById('video5');
  const video6 = document.getElementById('video6');

  video3.addEventListener('canplay', () => {
    milano.setAttribute('data-ready', 'true');
  });
  video4.addEventListener('canplay', () => {
    parigi.setAttribute('data-ready', 'true');
  });
  video5.addEventListener('canplay', () => {
    ny.setAttribute('data-ready', 'true');
  });
  video6.addEventListener('canplay', () => {
    londra.setAttribute('data-ready', 'true');
  });

  milano.onmouseover = VideoS;
  milano.onmouseout = VideoF;
  parigi.onmouseover = VideoS;
  parigi.onmouseout = VideoF;
  ny.onmouseover = VideoS;
  ny.onmouseout = VideoF;
  londra.onmouseover = VideoS;
  londra.onmouseout = VideoF;

  function VideoS() {
    const ready = this.getAttribute('data-ready') === 'true';
    switch (this.id) {
      case 'milano':
        if (ready) {
          video3.play();
        }
        break;
      case 'parigi':
        if (ready) {
          video4.play();
        }
        break;
      case 'ny':
        if (ready) {
          video5.play();
        }
        break;
      case 'londra':
        if (ready) {
          video6.play();
        }
        break;
    }
  }

  function VideoF() {
    switch (this.id) {
      case 'milano':
        video3.pause();
        video3.currentTime = 0;
        break;
      case 'parigi':
        video4.pause();
        video4.currentTime = 0;
        break;
      case 'ny':
        video5.pause();
        video5.currentTime = 0;
        break;
      case 'londra':
        video6.pause();
        video6.currentTime = 0;
        break;
    }
  }
</script>

In this updated code, we add a data-ready attribute to each div element, which is initially set to false. When the canplay event fires on each video element, we set the corresponding div's data-ready attribute to true. Then, in the VideoS function, we check if the div has the data-ready attribute set to true before calling play(). With this check in place, the pause() method will no longer interrupt a previous call to play(), and the error message should no longer appear.