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

Question

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

是autoplay造成的吗？
是不是在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;
    }
}

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

不知道 播放事件 是由 JavaScript 调用 play()
不知道是不是因为视频导致的暂停事件

请注意：我无法在play()上添加标志，因为它在网页中被调用。网页不是我写的，我也改不了。（我正在写一个 Chrome 扩展）

谁能帮我解决这个问题？

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

Answer 1

当您从 javaScript 调用到 play() 时，只需将元素中的一个属性设置为 true 以指定它由 javascript.While 侦听 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
       }

我们有 ended 事件，当视频到达 end.Use 时触发此事件，以了解由视频引起的暂停事件是否到达终点。

Answer 2

您可以尝试隐藏默认控件并创建您自己的控件。这样您将仅获得有关用户操作的信息。

据我所知，用户按下 播放按钮 和由于 autoplay 标志设置为而开始播放视频之间没有区别真.

正如 HTML5 specification 所说：

The autoplay attribute is a boolean attribute. When present, the user agent will automatically begin playback of the media resource as soon as it can do so without stopping.

请记住，由于 autoplay，如果连接速度较慢，用户可以在播放开始前按 play 按钮旗帜.

要确定播放结束，您可以使用 ended 事件或尝试检查播放位置（duration 和 currentTime 个属性）。

Answer 3

我无法创建自己的视频控件。如问题所述，"I'm writing a Chrome extension, and not able to change the web page"。

我得到的最佳解决方案（不完美）：

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;
            var self = this;
            Util.setTimeout(function() {
                // we don't record pause event followed by ended, because it is caused by video reaches end
                if (!videoElem.hasEnded) {
                    // deal with pause event caused by user actions
                }
                videoElem.hasEnded = false;
            }, 50);
            return true;
        case 'ended':
            videoElem.hasEnded = true;
            return true;
    }
}

Please Note: this answer is not perfect. It don't know the difference between play event caused by autoplay and by call play() in JavaScript.

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

How to know what causes a html video start playing?

javascript

google-chrome-extension

html5-video

dom-events