在 iPhone 上使用 html5 视频事件，如何从简单的暂停中判断“完成”按钮单击？答案

【问题标题】：Using html5 video events on the iPhone, how do I tell "Done" button click from a simple pause?在 iPhone 上使用 html5 视频事件，如何从简单的暂停中判断“完成”按钮单击？
【发布时间】：2011-03-07 01:38:07
【问题描述】：

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

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

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

video.addEventListener('pause', myFunction);

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

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

【问题讨论】：

标签： iphone video html

【解决方案1】：

只需检查暂停函数中的 webkitDisplayingFullscreen 布尔值。按 Done 或 Pause 会触发暂停事件，但 Done 会做一些额外的事情，比如退出全屏模式。进行该检查将帮助您区分 2 个按钮按下。下面是一些示例代码。

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

【讨论】：

请注意此属性仅在最近的 iOS 版本中可用。
如果您播放视频然后在播放视频时按“完成”，则此方法有效 - 但如果您暂停视频然后按“完成”，则不会触发...编辑：看到还有一个后续问题：stackoverflow.com/questions/11112150/…

【解决方案2】：

这是你需要的：

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

反之亦然

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

这是我找到的对您问题的另一个答案：How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?

【讨论】：

【解决方案3】：

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

【讨论】：

谢谢，但正如我所提到的，我最初尝试“结束”，但它仅在允许视频播放完成时触发。点击“完成”就不一样了。