javascript - HTML5 playbackRate 和 Firefox

Question

我有一个带有 HTML5 视频播放器的页面。我使用 jQuery 创建了一个非常简单的播放速度切换按钮。

用户点击该按钮，每按一次，视频的 playbackRate 属性的速度就会乘以 2。

因此您可以从 1x 到 2x、4x、8x、16x、32x、64x、128x...等等。

但是，在 Firefox 中，视频在我页面上的播放率从未超过 5 倍。

一旦 playbackRate 为 4，脚本将它乘以 2 - 它变成 5(而不是 8)。

在 Google Chrome 中测试同一页面时不会发生此问题。

这是我的脚本:

$('#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;
  }

});

我的函数中没有更多代码。没有其他处理程序或脚本干扰。我单击按钮，在乘数之前中断:playbackRate 为 4。我在乘数之后中断，playbackRate 为 5。

如果为 1，则乘数返回 2。如果为 2，则乘数返回 4。如果为 4，则乘数返回 5。...什么!？

在 Chrome 中，速度像预期的那样不断翻倍。为什么它在 Firefox 中上限为 5？我错过了什么吗？

Answer 1

来自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.

编辑:每个浏览器以不同方式处理超出此推荐范围的移动。 Firefox 恰好将值范围限制在 0.5 到 5 之间。Chrome 限制在 0.5 到 16 范围内。如果您超出推荐范围，您将在所有浏览器中获得不同的行为，因此我建议在您的代码中将其限制为 4x。