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

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

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

正如HTML5 specification所说：

autoplay属性是一个布尔属性。当存在时，用户代理将立即自动开始播放媒体资源因为它可以不停地这样做。

请注意，如果连接速度很慢，用户可以在播放开始之前按播放按钮，因为自动播放标志。

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

Answer 2

当您从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
       }

我们有ended事件在视频到达时触发。使用此事件来了解视频导致的暂停事件是否到达终点。

Answer 3

我无法创建自己的视频控件。如上所述，“我正在编写Chrome扩展程序，但无法更改网页”。

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

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;
    }
}

请注意：这个答案并不完美。它不知道autoplay引起的播放事件与JavaScript中的play()调用之间的区别。

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

3 个答案: