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

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

3 голосов
/ 14 января 2011

http://sandbox.solutionsbydesign.com/i-screenplay/h5/

Выше приведен пример, который я скачал с Apple, где вы можете использовать элементы управления для воспроизведения и полноэкранного режима.В Safara / iPad это прекрасно работает.Однако я хочу, чтобы люди нажимали на ссылку, она загружала видео и затем переходила в полноэкранный режим.Так, например, по ссылке выше, если после окончания загрузки точек он перешел в полноэкранный режим, это было бы идеально.

http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html Более подробная информация по этому вопросу.

Ответы [ 4 ]

5 голосов
/ 08 марта 2011

Лучшее, что я смог придумать, это:

Настройте свой тег видео и используйте 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();
});

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

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

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

3 голосов
/ 20 декабря 2013

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

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

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

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

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

2 голосов
/ 29 июля 2011

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

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

1 голос
/ 10 января 2014

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

Возможно, я делаю это неправильно, но вот как я заставил его работать на меня (на 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 может быть необязательным.

...