视频回退播放操作

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

视频播放，我们一直都是向前播放的。今天，我们来谈谈，视频如何向后播放呢？

视频向后播放，并不是视频本末反转之后顺序播放。

初始化

为了更好地讲解并演示视频回退播放操作，我们大体完成视频项目的一些功能：

• 视频播放
• 视频停止
• 视频快进⏩
• 视频快退⏪ - 这个就是我们本文要讲解的内容，不难

前三个功能是为了最后一个功能服务的，简称绿叶🍃衬鲜花💐，也是因为前三个功能比较常用，后一个功能比较少接触。

前面三个功能点就不贴代码，感兴趣的读者可以跳到 体验地址 小节阅读，初始化静态效果图如下：

初始化.png

P(Play) 代表播放 ▶️，S(Stop) 代表停止 ⏸️，B(Backward) 代表快退 ⏪，F(Fackward) 代表快进 ⏩。

使用 playbackRate 实现后退播放？

在视频进行变速前进的时候，我们一般都会使用 playbackRate 这个属性进行调整。比如：playbackRate = 2表明是 2 倍速前进；playbackRate = 0.5 表明是配速减缓到原来 1/2 向前播放...

咦，那么是不是说我们设置 playbackRate = -2 后，视频 2 倍速后退呢？设置了 playbackRate = -0.5 后，视频配速减缓到原来的 1/2 向后播放呢？

答案是：NO。

捂脸.png

MDN 中指明 If playbackRate is negative, the media is not played backwards. 也就是说，playbackRate 只能将视频/音频向前播放。

这也是难怪人家这么定义，因为将视频或音频向后播放，意义不大。

但是又不是说毫无意义，比如遇到场景，你的视频跟图表联动的时候，视频向后播放，图表是什么情况，那不是查看更清晰？扯远了，我们还是回到视频向后播放。那么我们有什么方法使得视频向后播放呢？

使用 currentTime 实现后退播放

是的，章节标题已经出卖了我。我们可以通过 使用 currentTime 实现视频后退播放。

我们向前播放视频的时候（playbackRate 为正数)，改变的就是 currentTime 的值；那么实现视频倒退，我们也可以使用 currentTime。

示例中，我们也是使用 currentTime 实现倍速。

这就很简单了，不是吗？

关键的代码就是：

// 回退
function windBackward() {
  if(media.currentTime <= 3) {
    clearInterval(intervalRwd);
    stopMedia();
  } else {
    media.currentTime -= 3; // 关键点
  }
}

这么简单你都能水一篇文章，你是来

搞笑.png

的嘛？

嗯～ 嗯～ 嗯～

具体代码请参考下面的体验地址👇

这里的快进的功能，我也使用了 currentTime 实现，读者可以使用 playbackRate 实现快进

体验地址

详细的代码，请点击进入码上掘金查看（右上角 icon 按钮）👇

代码片段