检测视频元素上的播放/暂停交互并忽略通过搜索功能触发的事件

Question

我的视频元素有问题事件：

我只想在与 play 或 pause 按钮交互时触发分析事件。

play

、

pause

和

playing

事件按预期工作，直到使用 seek 功能。

我想将播放/暂停事件与通过搜索/搜索触发的事件隔离开来。

当视频正在播放并且被单击（移动到不同点）时，会触发

play

、

playing

和

pause

事件，因为视频将暂停缓冲并开始播放视频再次。这个顺序并不总是相同的。当暂停时，您不会收到任何这些事件。

在调试

playing

和

pause

事件时，我看到了以下顺序：

• 订单 1：

  Pause

  、

  Seeking

  、

  Seeked

  、

  Playing

• 订单 2：

  Pause

  、

  Playing

  、

  Seeking

  、

  Seeked

  、

  Playing

此链接到 w3.org/mediaevents 为您提供了上述内容的良好指示。

我已经在 jsfiddle 中设置了我的自己的版本（请参阅控制台日志）。

我尝试设置一个在超时时重置的标志，并设置/检查每个事件的最后状态，例如

lastEvent = 'seeking'

。由于消防顺序不一致，这些都没有 100% 有效。如果拖动搜索栏，它不会触发

play

、

playing

或

paused

事件，从而添加另一个场景。

Answer 1

我也在寻找一个真正好的答案。到目前为止我有这个解决方法：

    function paused() {
        stateSeeked = false;
        stateEnded = false;
        setTimeout(function () {
            if (!stateSeeked && !stateEnded) {
                active = false;
            }
        }, 200);
    }

    function seek(event) {
        stateSeeked = true;
    }

    function ended() {
        stateEnded = true;
        if (trackDuration !== Infinity) {
            player.audio.src = "";
            player.skipNext();
        } else {
            player.audio.load();
            player.audio.play();
        }
    }

此代码适用于我自己的播放器，完整代码请参见： https://github.com/oyosoftware/oyoplayer 我还计划自己编写播放器的视觉部分，并使用我自己的暂停按钮。这样我就可以确定我会有一个“真正的”暂停。