HTML5 playbackRate and Firefox

Question

I have a page with a HTML5 video player. I created a very simple playback speed toggle button using jQuery.

The user clicks the button, and it multiplies the speed of the video's playbackRate property by 2 with each press.

So you can go from 1x to 2x, 4x, 8x, 16x, 32x, 64x, 128x... and so on.

However, in Firefox, the video's playbackRate on my page never goes beyond 5x.

As soon as the playbackRate is 4, and the script multiplies it by 2 - it turns into 5 (instead of 8).

This issue does not happen while testing the same page in Google Chrome.

Here is my script:

$('#change_speed').click(function()
{
  var current_speed = ($('#video').get(0).playbackRate).toFixed(0);

  console.log('playback speed: ' + $('#video').get(0).playbackRate); //For debugging

  if(current_speed == 0)
  {
     $('#video').get(0).playbackRate = 1;
  }
  else
  {
    $('#video').get(0).playbackRate = $('#video').get(0).playbackRate * 2;
  }

});

There is no more code in my function. There is no other handler or script interfering. I click the button, I break before the multiplier: playbackRate is 4. I break after the multiplier and the playbackRate is 5.

If it's 1, the multiplier returns 2. If it's 2, the multiplier returns 4. If it's 4, the multiplier returns 5. ...What!?

In Chrome, the speed keeps doubling like intended. Why is it capping at 5 in Firefox? Am I missing something?

Answer 1

From the MDN

Most browsers stop playing audio outside playbackRate bounds of 0.5 and 4, leaving the video playing silently. It's therefore recommended for most applications that you limit the range to between 0.5 and 4.

Edit: Each browser handles moving outside of this recommended range differently. Firefox happens to clamp the value range from 0.5 to 5. Chrome clamps from 0.5 to 16. If you go outside the recommended range, you will get different behavior across all browsers so I suggest clamping it in your code to 4x.