javascript - 如何知道 html 视频开始播放的原因？

Question

有一个 HTML 视频标签。我想知道什么时候开始播放:

• 是否是由自动播放引起的？
• 是否是JavaScript中调用play()引起的？
• 是否是用户点击播放按钮导致的？

我想处理仅由用户操作引起的播放事件(以上三种情况中的第三种情况)。

我当前的解决方案:

function videoEventHandler(ev) {
    var videoElem = ev.target;
    if (!videoElem.controls) {
        // no controls in video, means events can't be caused by user actions
        return true;
    }

    switch (ev.type) {
        case 'play':
            if (videoElem.autoplay && !videoElem.hasPaused) {
                // first play event in autoplay video, muse be caused by autoplay
                return true;
            }
            // deal with play event caused by user actions
            return true;

        case 'pause':
            ev.target.hasPaused = true;
            // deal with pause event caused by user actions
            return true;
    }
}

问题:我的解决方案无法处理这些场景:

• 它不知道 play 事件是否由 JavaScript 调用 play() 引起
• 它不知道由视频引起的暂停事件是否到达结束

请注意:我无法在 play() 上添加标志，因为它是在网页中调用的。该网页不是我写的，我无法更改它。 (我正在编写一个 Chrome 扩展程序)

有人可以帮我解决这个问题吗？

这是一个非常具体的问题，可能会让某些人感到困惑。如果我的问题让您感到困惑，请发表评论，我会尽力解释得更清楚。赞赏。

Answer 1

当您从 javaScript 调用 play() 时，只需将元素中的一个属性设置为 true，以指定它由 javascript 启动。在监听 play 事件时，您可以检查该变量以了解它是否是从 javascript 播放的。

调用播放之前:

video.playedFromJavascript=true;
video.play(); 

播放中监听器:

if (videoElem.playedFromJavascript==true) {
                // play event caused by javascript
videoElem.playedFromJavascript=false; // resetting it to false once captured
       }

我们有 ending 事件，该事件在视频到达结尾时触发。使用此事件可以了解视频引起的暂停事件是否到达结尾。