Подтвердить что ты не робот

Видео HTML5 на iPad

У меня есть динамическая видео галерея, и она отлично работает на компьютере. При переходе на iPad видео начинает загружаться, и он показывает, что значок не может воспроизводиться. Вместо этого я предпочел бы, чтобы видео не показывалось, пока оно не будет готово к игре. Я попытался добавить слушателей событий для "canplaythrough" и "canplay", и когда они возникают, когда видео исчезает, тогда играется. IPad не поддерживает эти события?

new_video = document.createElement('video');
new_video.setAttribute('class', 'none');
new_video.setAttribute('width', '568');
new_video.setAttribute('height', '269');
new_video.setAttribute('id', 'video'+video_num);
current_video.insertBefore(new_video, video_controls);
new_video.load();
new_video.addEventListener('canplaythrough', function() {
     $('#video'+video_num').fadeIn(100);
     new_video.play();
});
4b9b3361

ОТВЕТЫ

Ответ 1

Способ решения этой визуальной проблемы - скрыть элемент видео до тех пор, пока он не будет готов к воспроизведению. Обратите внимание, что вы не можете установить display:none (видео не будет загружаться, если вы это сделаете), а visibility:hidden тоже не решит проблему.

Чтобы исправить это, оберните элемент видео на DIV с помощью overflow:hidden и установите -webkit-transform:translateX(1024px) (число, достаточно высокое, чтобы вывести видео за пределы экрана).

Затем вам нужно прослушивать события canplay или canplaythrough или load (в зависимости от ваших потребностей) и установить после этого translateX на ноль.

Ответ 2

На iPad он не будет загружать видео, пока пользователь не запустит событие, созданное Apple, чтобы пользователи iPhone или iPad не могли сжечь свои тарифные планы. Таким образом, вы не сможете делать то, что вы хотите извините.

Проверьте эту ссылку и найдите раздел "Особенности устройства" для получения дополнительной информации. Но он не начнет загружать данные, поэтому не сможет запустить событие canplaythrough, пока пользователь не коснется его.

Ответ 3

Убедитесь, что браузер может воспроизвести видео до того, как вы его загрузите:

function canPlayVorbis() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/ogg; codecs="theora, vorbis"').replace(/no/, ''));
}

function canPlayMP4() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''));
}

function canPlayWebM() {
    var v = document.createElement('video');
    return !!(v.canPlayType && v.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''));
}

Взято из Погружение в приложение HTML5 A.

Ответ 4

автоматически запускает плеер на ipad/iphone:

function fakeClick(fn) {
    var $a = $('<a href="#" id="fakeClick"></a>');

    $a.bind("click", function(e) {
        e.preventDefault();
        fn();
    });

    $("body").append($a);

    var evt,
        el = $("#fakeClick").get(0);

        if (document.createEvent) {
            evt = document.createEvent("MouseEvents");
            if (evt.initMouseEvent) {
                evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                el.dispatchEvent(evt);
            }
        }

        $(el).remove();
} 

$(function() {
    var video = $("#mobileVideo").get(0);

    fakeClick(function() {
        video.play();
    });
});

Ответ 5

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

Ответ 6

Поймите, это старая проблема, но если кто-то еще спотыкается об этом, я столкнулся с аналогичной проблемой.

Посмотрев на события, отправленные элементом видео, похоже, что iPad начнет загружать видео, а затем почти сразу же приостановит его (похоже, одновременно с первым событием "прогресс" ).

Он не будет запускать события "canplay" или "canplaythrough" до тех пор, пока воспроизведение не начнется, поэтому вы должны прослушать одно из трех событий, которые срабатывают до начала воспроизведения:

  • loadstart
  • прогресс
  • приостановить

Я бы изменил ваш обработчик на "loadstart" и дал бы этот снимок.