Question

我有一个带有视频元素和导航菜单的容器。导航将被隐藏，直到视频播放完毕，此时视频将被隐藏，导航将变为可见。这在桌面上完美运行。但是，在iPad上，视频无法在“结束”事件显然结束之前完成播放。

此外，由于您无法在iOS中自动播放视频元素，因此我还会捕获播放事件以在视频启动后隐藏控件。我留下了这个，以防万一有人知道它引起的问题。尽管如此，它仍然会被移除。

这种行为是否有解决方法？我找不到任何关于这个问题的信息。在我看来，视频播放有一些延迟，并且结束的事件在计算的持续时间之后触发，无论实际完成多长时间，尽管这只是推测。我唯一确定的是，当结束的事件触发时，视频没有完成播放。我正在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;
    });
});

Answer 1

对于初学者，不推荐使用bind。切换到开启（）。

$(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;
    });
});

试试。

在视频播放完毕之前，iPad 1会播放视频结束事件

1 个答案: