在 iPhone 上使用 html5 视频事件，如何告诉“完成”简单的暂停点击按钮？

Question

我有一个适用于 iPhone 的网页，它使用 HTML5 视频标签。在 iPhone 上，此类嵌入视频在本机播放器中播放。我想检查视频何时结束以及用户何时使用“完成”按钮关闭视频。最初，我尝试了这个：

var video = $("#someVideo").get(0);          
video.addEventListener('ended', myFunction);

但只有当视频被允许结束时才会触发。在尝试了其他事件（挂起、停止、等待）后，我发现“完成”按钮会触发“暂停”事件。但是，当我添加此内容时：

video.addEventListener('pause', myFunction);

当用户点击播放控件中的暂停按钮时，我的代码会从“完成”按钮和调用。第二种情况是不可取的；我只想要第一个案例，但事件似乎没有给我足够的信息。

有谁知道如何判断用户何时点击 iPhone 播放器中的“完成”按钮（而不是简单地暂停）？

Answer 1

只需检查暂停函数中的 webkitDisplayingFullscreen 布尔值即可。按“完成”或“暂停”会触发暂停事件，但“完成”的作用有点像退出全屏模式。进行该检查将帮助您区分两次按下的按钮。
下面是一些示例代码。

<script>
var html5Video = function() {
    return {
        init: function() {
            var video = document.getElementsByTagName('video')[0];
            video.addEventListener('ended', endVideo, false);
            video.addEventListener('pause', pauseVideo, false);
        }
    };
}();

function endVideo() { 
    alert("video ended");
}

function pauseVideo() { 
    var video = document.getElementsByTagName('video')[0];
    if (!video.webkitDisplayingFullscreen)
        endVideo(); 
}

html5Video.init();

</script>

Answer 2

这就是您所需要的：

yourplayer.addEventListener('webkitendfullscreen', onPlayerExitFullscreen, false);

反之亦然

yourplayer.addEventListener('webkitbeginfullscreen', onPlayerEnterFullscreen, false);

这是我找到的您问题的另一个答案： 如何判断 HTML5 视频播放器何时在 iOS / iPad 上进入全屏模式？

Answer 3

有一个名为“结束”的事件，您可能应该使用它，请参阅 http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#event-media-ending 。