So i'm doing a web page where whenever you hover a section a video plays, and when you mouseout, it stops. It works fine for some videos, for others, for some reason when hovering the video doesn't start playing and it apperars this error "Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user's request."

I'm quite confused, because this problem is only happening in firefox, while in chrome, this error doesnt show up and works fine. What's wrong?

Here is what the page looks like enter image description here

This is the HTML code for one section of those two in the image (code is the same for all of them)

const video = document.querySelectorAll(".bckg")
var hover_video = document.querySelectorAll(".yt-links")

for (let i = 0; i < hover_video.length; i++) {
  hover_video[i].addEventListener("mouseover", function() {
    try {
      video[i].play()
    } catch (e) {
      console.log(e)
    }
  })
}

for (let i = 0; i < hover_video.length; i++) {
  hover_video[i].addEventListener("mouseout", function() {
    video[i].pause()
  })
}

.video-section-title {
  color: orange;
  font-size: 4rem;
  margin: 5% 0% 2% 0%;
}

.vid-section {
  position: relative;
  margin: 2.5vh 5%
}

.bckg {
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: -1;
}

.yt-links {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
}

.yt-links iframe {
  width: 20%;
  aspect-ratio: 16/9;
  margin: 2.5%;
  border-radius: 1rem;
}

<section class="vid-section">
  <h2 class="video-section-title">Mountain Bike</h2>
  <div class="yt-links">
    <video class="bckg" src="videos/bici.mp4" loop muted></video>
    <iframe src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</section>

So i'm doing a web page where whenever you hover a section a video plays, and when you mouseout, it stops. It works fine for some videos, for others, for some reason when hovering the video doesn't start playing and it apperars this error "Uncaught (in promise) DOMException: The fetching process for the media resource was aborted by the user agent at the user's request."

I'm quite confused, because this problem is only happening in firefox, while in chrome, this error doesnt show up and works fine. What's wrong?

Here is what the page looks like enter image description here

This is the HTML code for one section of those two in the image (code is the same for all of them)

const video = document.querySelectorAll(".bckg")
var hover_video = document.querySelectorAll(".yt-links")

for (let i = 0; i < hover_video.length; i++) {
  hover_video[i].addEventListener("mouseover", function() {
    try {
      video[i].play()
    } catch (e) {
      console.log(e)
    }
  })
}

for (let i = 0; i < hover_video.length; i++) {
  hover_video[i].addEventListener("mouseout", function() {
    video[i].pause()
  })
}

.video-section-title {
  color: orange;
  font-size: 4rem;
  margin: 5% 0% 2% 0%;
}

.vid-section {
  position: relative;
  margin: 2.5vh 5%
}

.bckg {
  border-radius: 1rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  z-index: -1;
}

.yt-links {
  position: relative;
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
}

.yt-links iframe {
  width: 20%;
  aspect-ratio: 16/9;
  margin: 2.5%;
  border-radius: 1rem;
}

<section class="vid-section">
  <h2 class="video-section-title">Mountain Bike</h2>
  <div class="yt-links">
    <video class="bckg" src="videos/bici.mp4" loop muted></video>
    <iframe src="https://www.youtube./embed/HN8Co70QBG0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="https://www.youtube./embed/zbh4jb1NIVM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="https://www.youtube./embed/gr0scgxFMjE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <iframe src="https://www.youtube./embed/GQSOumJCQmU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</section>

• javascript
• html
• css

Share Improve this question Follow edited Oct 5, 2022 at 11:54 ThS 4,78322 gold badges1616 silver badges2828 bronze badges asked Oct 5, 2022 at 11:50 eloreaheloreah 7111 gold badge11 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

I've read a bit about this on mdn and github. https://developer.mozilla/en-US/docs/Web/API/HTMLMediaElement/play

https://github./elan-ev/opencast-studio/issues/581

It looks like it is related with timing of the play() pause() events. There isn't a concrete solution exactly. As far as I understand video.play() returns a promise. So if you just move your mouse quickly over video frames, it is possible that firefox will try to play video(returns promise and takes time to resolve) then pause(but maybe previous promise was not resolved yet), then play again etc. because everything is happening to quick so browser aborts the request. Maybe you can try to apply firefox's code example

playButton.addEventListener("click", handlePlayButton, false);
playVideo();

async function playVideo() {
  try {
    await videoElem.play();
    playButton.classList.add("playing");
  } catch (err) {
    playButton.classList.remove("playing");
  }
}

function handlePlayButton() {
  if (videoElem.paused) {
    playVideo();
  } else {
    videoElem.pause();
    playButton.classList.remove("playing");
  }
}

so you use a function that awaits the video.play() to resolve or rejected.

I hope this helps because there is not much examples. You can also have a look at this stackoverflow./... but I don't know if this is what you need.