在Javascript中实现回放功能

我已经用Javascript编写了一个视频播放器，我正在尝试实现一个回放/转发功能

这样做的目的是当按下按钮时，视频将倒带进来。我编程了一个版本，当点击按钮时会倒带一次，但是你必须不断点击它才能连续倒带

到目前为止，我已经做到了：

HTML

上面的代码导致我的Chrome标签崩溃，显然我做了一些非常错误的事情！但我的理解是，我只希望在视频尚未结束或已暂停的情况下启动回放功能。因此，当它处于该状态时，它应该运行for循环，该循环考虑到已过去的currentTime，并在按下鼠标时减去1秒（currentTime采用解释为秒的整数）。只要没有达到0秒，它就应该一直更新currentTime

---

为方便起见，上述代码已最小化。非常感谢您的建议。

我认为您已经创建了一个无限循环或将

mmedia.currentTime

设置为一个伪值

首先让我们讨论故障排除。查看控制台输出的内容，添加一些

console.log

语句以查看其运行时的值以及崩溃前的值，在调试器中逐步执行代码（使用条件断点过滤噪声）

现在是代码分析。尝试用硬编码值替换变量，看看逻辑是否正确：

while (!mmedia.paused && !mmedia.ended) {
 ^1       ^2                  ^3

为什么要这么久？是否存在需要运行for循环直到

mmedia.paused

和

mmedia.end

结束的情况

该变量何时更改以脱离循环

还是这个变量

因此，当for循环执行时，不会导致

mmedia.paused

或

mmedia.ended

从false更改为true，这是一个无限循环

您还可以检查

i！=0

我是否可能成为

<0

？如果是这样，

mmedia.currentTime

会处理小于0的值吗

最后但并非最不重要的一点是，若要中断while/for循环，则它处于阻塞过程中。这意味着，如果依赖用户交互来翻转其中一个取消标志，那么它将永远不会发生，因为线程正在等待while/for循环完成，然后才注册用户做了什么。如果无限循环被修复，单击一次将阻止暂停/停止按钮被单击，直到它到达开始位置（显然这是愚蠢的，因为您可以首先将

currentTime

设置为0）。另一个效果是，您将看不到回放过程，因为在线程完成执行代码之前，它不会更新显示

您将需要它以非阻塞方式重写逻辑。这称为异步代码，比简单循环复杂得多

var stopRewinding;

function rewind() {
  var timeout = 100;
  stopRewinding = false;

  if (mmedia.paused || mmedia.ended) {
    console.log("Media state unable to rewind");
    return;
  }

  function worker() {
    if (stopRewinding || mmedia.currentTime <= 0) {
      return; // All done so get outa here
    }

    mmedia.currentTime--;

    setTimeout(worker, timeout);
  }

  worker();
}

var停止倒带；
函数倒带（）{
var超时=100；
停止倒带=错误；
如果（媒体暂停| |媒体结束）{
console.log（“媒体状态无法倒带”）；
返回；
}
功能工人（）{
如果（停止倒带| | mmedia.currentTime，我认为您已经创建了一个无限循环或将
mmedia.currentTime
设置为一个伪值

首先让我们介绍故障排除。查看控制台输出的内容，添加一些
console.log
语句以查看运行时的值以及崩溃前的值，在调试器中逐步执行代码（使用条件断点过滤噪声）

现在进行代码分析。尝试用硬编码值替换变量，看看逻辑是否正确：

while (!mmedia.paused && !mmedia.ended) {
 ^1       ^2                  ^3

为什么是while？您是否需要运行for循环，直到
mmedia.paused
和
mmedia.end
该变量何时更改以脱离循环
还是这个变量
因此，当for循环执行时，不会导致
mmedia.paused
或
mmedia.ended
从false更改为true，这是一个无限循环

同时检查
i！=0
i是否可能
<0
？如果可能，
mmedia.currentTime
处理小于0的值

最后但并非最不重要的一点是，如果要中断while/for循环，它将处于阻塞过程中。这意味着如果依赖用户交互来翻转其中一个取消标志，它将永远不会发生，因为线程在注册用户之前正在等待while/for循环完成。如果无限循环单击一次将阻止暂停/停止按钮被单击，直到它到达开始位置（显然这是愚蠢的，因为您可以首先将
currentTime
设置为0）。另一个效果是，您将看不到回放过程，因为在线程执行完代码之前，它不会更新显示

您需要它以非阻塞方式重写逻辑。这称为异步代码，比简单循环复杂得多

var stopRewinding;

function rewind() {
  var timeout = 100;
  stopRewinding = false;

  if (mmedia.paused || mmedia.ended) {
    console.log("Media state unable to rewind");
    return;
  }

  function worker() {
    if (stopRewinding || mmedia.currentTime <= 0) {
      return; // All done so get outa here
    }

    mmedia.currentTime--;

    setTimeout(worker, timeout);
  }

  worker();
}

var停止倒带；
函数倒带（）{
var超时=100；
停止倒带=错误；
如果（媒体暂停| |媒体结束）{
console.log（“媒体状态无法倒带”）；
返回；
}
功能工人（）{
如果（停止倒带| | mmedia.currentTime Hi Sukima，非常感谢您的详细解释。我现在明白了我的错误所在。利用这些知识，我也能够实现正向功能。非常感谢。Hi Sukima，非常感谢您的详细解释。我现在明白了我的错误所在。利用这些知识，我可以我们已经能够实现转发功能。非常感谢。