iPad 1 запускает событие, завершившее воспроизведение видео до его окончания - PullRequest
1 голос
/ 28 февраля 2012

У меня есть контейнер с элементом видео и меню навигации.Навигация скрыта до тех пор, пока не закончится воспроизведение видео, после чего видео будет скрыто и навигация станет видимой.Это отлично работает на рабочем столе.Однако на iPad видео не заканчивается, пока не закончится событие «закончилась».

Кроме того, поскольку вы не можете автоматически воспроизвести элемент видео в iOS, я также ловлю событие воспроизведения, чтобыскрыть элементы управления после начала видео.Я оставил это на всякий случай, если кто-то знает проблему, которую это вызывает.Это все еще происходит, если этот бит удален.

Есть ли способ обойти это поведение?Я не мог найти ничего об этой проблеме.Мне кажется, что видео воспроизводится с некоторой задержкой, и завершенное событие срабатывает после расчетной продолжительности, независимо от того, сколько времени на самом деле требуется для его завершения, хотя это всего лишь предположение.Единственное, в чем я уверен, так это то, что видео не воспроизводится при срабатывании завершенного события.Я тестирую на iPad 1 под управлением Safari на iOS 5.

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

1 Ответ

1 голос
/ 07 июля 2012

Для начала, привязка устарела. Включить ().

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

Попробуйте это.

...