HTML5 видео на iPad

Question

У меня есть динамическая видео галерея, и она прекрасно работает на компьютере. При переходе на 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();
});

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

автоматически запускает плеер на 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();
    });
});

Answer 6

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

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/, ''));
}

Взято из Dive Into HTML5 Приложение A .

Answer 7

Возможно, именно поэтому ваше видео MP4 не будет воспроизводиться до полной загрузки: как воспроизвести видео HTML5 MP4 до полной загрузки . В любом случае, стоит попробовать.

Answer 8

Вот отличное место для ознакомления с событиями HTML5.

http://www.w3.org/2010/05/video/mediaevents.html