Веб-приложение — iPad webkitEnterFullscreen — Программное полноэкранное видео

Это лучшее, что я смог придумать.

Настройте свой тег видео и используйте CSS, чтобы поместить его за пределы экрана где-нибудь (его нельзя установить для отображения: нет). Я использовал абсолютное позиционирование, чтобы переместить его за верхний левый угол экрана.

Затем используйте этот JS:

$('.popup.ipad a').click(function() {

        var currentID = $(this).closest('.player').find('video').attr('id');
        var videoContainer = document.getElementById(currentID);
        var newSrc = $(this).attr('href');

        videoContainer.src = newSrc;
        videoContainer.webkitEnterFullscreen();
        videoContainer.play();
});

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

Итак, мне нужно выяснить, как прослушивать событие, которое запускается при касании «Готово» (я даже не уверен, что для этого есть событие). Или используйте метод, описанный здесь, и запускайте его каждую секунду, чтобы проверить, используется ли полноэкранный режим. Но у меня не было большого успеха, независимо от того, что я делаю, я получаю ошибки.

Надеюсь, это поможет вам найти некоторые ответы. Если это так, дайте мне знать!

Секрет в том, что вы не можете перейти в полноэкранный режим, пока метаданные видео не будут загружены. В документы Apple указывают:

Это свойство [webkitSupportsFullscreen] также имеет значение false, если загружены метаданные или не запущено событие loadmetadata, а также если файлы содержат только звук».

Итак, чтобы запустить полноэкранный режим в нужное время, просто создайте прослушиватель событий для события loadedmetadata:

videoContainer.addEventListener('loadedmetadata', function() {
    if (videoContainer.webkitEnterFullscreen) {
        videoContainer.webkitEnterFullscreen();
    }
});

Вооружившись этим, вы должны иметь возможность программно добавлять и воспроизводить полноэкранные видео на iOS, независимо от того, используете ли вы видеоконтейнер «вне экрана», о котором упоминал Дрю, или динамически добавляя теги видео.

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

@Drew Baker Вот пост, который я сделал прошлой ночью о полноэкранном режиме: http://johncblandii.com/2011/07/html5-video-fullscreen.html.

Я тоже работал над этой проблемой. Попытка заставить видео воспроизводиться в полноэкранном режиме одним нажатием кнопки.

Возможно, я делаю это неправильно, но вот как я заставил это работать для меня (на ipad air, iphone 5, galaxy 3, nexus 7... все, кроме ipad 2, где видео еще не выходит на полный экран, но будет играть)

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

<div onclick='openAndPlay(event);' id='video_layover' ></div>

function openAndPlay(event) { 

    myvideo.play();
    myvideo.webkitEnterFullscreen();

    return false;
}

Я обнаружил, что порядок важен. Сначала игра, потом полноэкранный запрос. Попробуйте это и посмотрите, работает ли это для вас. Возврат false может быть не нужен.