17

When using Firefox and changing the position of a video using HTML5 video. Does anyone have insight to what causes this?

Here are my ideas:

  1. Setting it to a time value that has no corresponding frame - I have attempted to always set it to a time where a frame exists to counter this
  2. The video frame does not load by the time the next frame is asked for - in order to test this I have set the timeout to 5 ms, this definitely drops the amount of errors so that is some evidence that this is the source of the error.

I have made slider that adjusts video time that replicates the error:

var vid = $('#v0')[0];
var slider = document.getElementById('vidSlider')
linkVideoToSlider();

vid.onplay = vid.onclick = function() {
  vid.onplay = vid.onclick = null;

  setTimeout(function() {
    vid.pause();
    slider.value = vid.currentTime / vid.duration * 100
    vid.currentTime += (1 / 29.97);

  }, 12000);

  setInterval(function() {
    $('#time').html((vid.currentTime * 29.97).toPrecision(5));
    slider.value = vid.currentTime / vid.duration * slider.max;
  }, 100);
};

function linkVideoToSlider() {
  var adjustVideoTime = function() {
    //Note that we attempt to adjust to a time that has a frame.
    setTimeout(function() {
      vid.currentTime = Number.parseFloat(slider.value / 29.97).toFixed(4);
    }, 5);
  }
  slider.oninput = adjustVideoTime
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Frame number:
<p id="time"></p>
<video id="v0" controls tabindex="0" autobuffer preload>
    <source type="video/webm; codecs=&quot;vp8, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
    <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
    <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="http://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
    <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video>
<div class="slidecontainer">
  <p>Time of video slider:</p>
  <input type="range" min="0" max="1024" value="0" class="slider" id="vidSlider">
</div>

if you prefer JSFiddle: https://jsfiddle.net/tehsurfer/9ahz5rmd/52/

6
  • 1
    have you encoded the video with the MOOV atom at the start? My guess is if the metadata hasn't loaded yet you may be hitting an unexpected error Commented Oct 29, 2018 at 5:13
  • Thank @Offbeatmammal, I did not know that encoding with a MOOV was a thing to do, I will look into how to do this Commented Oct 29, 2018 at 5:15
  • To check this I have tried this JSFiddle with the .mp4 version removed. Behavior appears to remain unchanged Commented Oct 29, 2018 at 21:12
  • 1
    this seems to be FF related only, here is a bug-report: bugzilla.mozilla.org/show_bug.cgi?id=1507193
    – Vickel
    Commented Dec 18, 2018 at 21:13
  • 1
    here is an answer on meta on how to proceed if questions turns out to be a bug: meta.stackoverflow.com/questions/308817/…
    – Vickel
    Commented Dec 23, 2018 at 13:51

1 Answer 1

12

This is a reported bug in Firefox, fixed in version 70+.

AbortError: The operation was aborted

Is output to console when either:

  1. A seek in video element is aborted.
  2. The time of a video element is adjusted.

Some developers there say that Firefox performs much slower than Chrome or Edge in these scenarios, but I haven't found a way to validate a difference personally.

I will update this answer if a bug fix or workaround is found.

Update:

After updating Firefox to 70 it appears to be fixed and performance seems to have improved.

2
  • 1
    The bug mentions it is fixed in version 70
    – clemp6r
    Commented Oct 15, 2019 at 9:12
  • 1
    bug still in 66
    – Leo Smith
    Commented Jun 23, 2020 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.