iPad 1 在视频播放完毕之前触发视频结束事件答案

【问题标题】：iPad 1 fires video ended event before the video finishes playingiPad 1 在视频播放完毕之前触发视频结束事件
【发布时间】：2012-02-27 21:44:41
【问题描述】：

我有一个包含视频元素和导航菜单的容器。导航隐藏，直到视频播放完毕，此时视频被隐藏并且导航变得可见。这在桌面上完美运行。但是，在 iPad 上，视频不会在“结束”事件明显结束之前完成播放。

另外，因为您不能在 iOS 中自动播放视频元素，所以我还捕获了播放事件以在视频开始后隐藏控件。我把它留在里面，以防万一有人知道它引起的问题。但是，删除该位后仍然会发生这种情况。

是否有解决此问题的方法？我找不到有关此问题的任何信息。在我看来，视频播放有些滞后，并且结束的事件在计算的持续时间后触发，无论实际需要多长时间才能完成，尽管这只是猜测。我唯一确定的是，当 end 事件触发时，视频没有播放完毕。我正在在 iOS 5 上运行 Safari 的 iPad 1 上进行测试。

<div id="home-nav">
    <video autoplay controls width="870" height="489" id="home-video">
        <source src="home_1.mp4" type="video/mp4" />
    </video>
    <div id="nav-overlay">
        <a class="link" href="#">Link 1</a>
        <a class="link" href="#">Link 2</a>
        <a class="link" href="#">Link 3</a>
        <a class="link" href="#">Link 4</a>
    </div>
</div><!-- /home-nav -->

$(function(){
    var overlay = $('#nav-overlay');
    var homevideo = $('#home-video');
    overlay.hide();
    homevideo.bind('ended', function(){
        homevideo.hide();
        overlay.show();
    });
    homevideo.bind('play', function(){
        homevideo[0].removeAttribute("controls");
        homevideo[0].currentTime = 0.1;
    });
});

【问题讨论】：

标签： javascript jquery mobile-safari html5-video

【解决方案1】：

对于初学者，不推荐使用绑定。切换到 on()。

$(function(){
    var overlay = $('#nav-overlay');
    var homevideo = $('#home-video');
    overlay.hide();

    homevideo.on('ended', function(){
        $(this).hide();
        overlay.show();
    });

    homevideo.on('play', function(){
        $(this).removeAttribute("controls");
        $(this).get(0).currentTime = 0.1;
    });
});

试试看。

【讨论】：