反向鼠标移动播放视频答案

【问题标题】：Play video in reverse mouse move反向鼠标移动播放视频
【发布时间】：2021-03-05 10:39:06
【问题描述】：

我有一个 html 视频，我正在根据鼠标的位置控制播放速度。当鼠标位置变为负数时，我收到此错误：

未能在“HTMLMediaElement”上设置“playbackRate”属性：提供的播放速率 (-0.01) 不在支持的播放范围内。

这是因为负数不能作为播放速率。如果值小于零时向后播放视频会很酷。我怎样才能做到这一点？

$("body").mousemove(function(event){            
    var relX = event.pageX - $(this).offset().left;
    var relY = event.pageY - $(this).offset().top;
    $('.slow-video').prop({
       playbackRate: ((relY/200)+(relX/300)-2)
    });
});

【问题讨论】：

你可以有2个视频源，当播放速率为负时，激活第2个视频源，将反向渲染，并播放它
现代视频编解码器不允许反向播放。在 SO 上还有其他具有相同问题和结论的问题。上面有两个不同的预编码视频的解决方案听起来是你最好的选择。
这能回答你的问题吗？ Is it possible to play HTML5 video in reverse?

标签： jquery

【解决方案1】：

正如您所发现的，您不能将视频playbackRate 设置为否定的。但是，您可以使用计时器或间隔在任何所需方向上“动画化”视频帧。

另外请注意，我建议使用鼠标位置来控制播放方向不是最人性化的，也不准确。在下面的示例中，我使用了滑块输入，因为它提供了更精细的控制。试试这个：

let playbackInterval;
let $video = $('video');
let video = $video[0];
let $rateLabel = $('#rate-value');

video.volume = 0.1; // just for testing

let $rate = $("#rate").on('input', e => {
  clearInterval(playbackInterval);
  var rate = parseFloat(e.target.value / 100);
  $rateLabel.text(`${Math.round(rate * 100) / 10}x`);

  if (rate === 0.1) {
    video.play();
  } else {
    video.pause();
    playbackInterval = setInterval(function() {
      video.currentTime = Math.max(0, video.currentTime + rate);      
      if (video.currentTime <= 0 || video.currentTime >= video.duration) {
        clearInterval(playbackInterval);
      }
    }, 100);
  }
});

$video.on('play', () => {
  $rate.val(10).trigger('input');
  clearInterval(playbackInterval)
});

video {
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<video autobuffer controls>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video><br /> Playback rate:
<input type="range" id="rate" min="-10" max="20" step="1" value="10" />
<label id="rate-value">1x</label>

【讨论】：