Триггер .changePage (), когда видео html5 заканчивается, iOS - PullRequest
Новая
       12

Триггер .changePage (), когда видео html5 заканчивается, iOS

1 голос
/ 02 июня 2011

Вот фрагмент, который выполняет работу на Android (v2.2) и различных браузерах для настольных компьютеров (Chrome, FF).Проблема заключается в iOS, которая с радостью предупредит, но не изменит страницу.

Кажется, что пользователь ждет нажатия кнопки Готово , что я хотел бы * избегать 1006 *.Я знаю, что этого можно достичь, потому что кто-то пытался это сделать, используя iOS 4, в тот момент, когда я копался в коде, и это сработало для них - так что я знаю, что это возможно.чтобы пропустить кнопку «Готово» после окончания воспроизведения видео html5, чтобы отобразить страницу контента, предпочтительно с помощью jQuery-Mobile.

Редактировать:

Я не получаю никаких ошибок в консоли, будь то FireBug или Chrome.Теперь мне интересно, есть ли способ заставить видео воспроизводиться без «встроенного» плеера, который, как я полагаю, не контролируется через JS или иным способом.

JavaScript: 

    var v = $('#movie');

    //what happens after the video is over?
    v.bind('ended',function(){
      alert("The video will close, and a content page will show.");
      $.mobile.changePage($('#lamps'));
    });

Разметка : 

    <div data-role="page" id="home">
        <video id="movie">
            <source src="video/vid_name.mv4" />
        </video>
    </div>

    <div data-role="page" id="lamps">
        <div>...</div>
    </div>

Любая помощь будет принята с благодарностью.:)

Другое Редактирование:

Обнуление div, содержащего тег <video>, решает проблему закрытия видео (я только что добавил контейнер): 

    $('video#movie').bind('ended',function(){
        $('#vid_container').remove();
        $.mobile.changePage($('#lamps'));
    });

Требование к конечному результату выполнено , но кажется немного хакерским - вещи немного подпрыгивают.Я все еще ищу надежное исправление. - @Phill Pafford, спасибо за вашу помощь:)

Ответы [ 2 ]

1 голос
/ 05 июня 2011

Удаление контейнера <video> отвечает на вопрос о закрытии видео: 

<!DOCTYPE html> 
<html> 
<head> 
 ...
<script>
    $('video#movie').bind('ended',function(){
        $('#vid_container').remove();
        $.mobile.changePage($('#lamps'));
    });
</script>
</head>
<body>
    <div data-role="page" id="home"> 
        <div id="vid_container"> 
            <video id="movie" controls>
                 <source src="video/vid_name.mv4" />
            </video>
        </div>
    </div>

    <div data-role="page" id="lamps">
     ...
    </div>
</body>
</html>
0 голосов
/ 03 июня 2011

Попробуйте добавить тип элемента следующим образом: 

$('video#movie').bind('progress',function(e){
    console.log(e.total + ' ' + e.loaded + ' ' + e.lengthComputable );
});

$('video#movie').bind('ended',function(){
    alert('The video will close, and a content page will show.');
    $.mobile.changePage($('#lamps'));
});
...