Есть ли способ сделать HTML5 видео полноэкранным?

Question

Можно ли воспроизвести видео в полноэкранном режиме с помощью тега HTML5 <video>?

А если это невозможно, кто-нибудь знает, есть ли причина для такого решения?

Answer 1

Нет, невозможно получить полноэкранное видео в формате html 5. Если вы хотите знать причины, вам повезло, потому что битва за полноэкранные сражения ведется прямо сейчас. См. Список рассылки WHATWG и найдите слово «видео». Я лично надеюсь, что они предоставляют полноэкранный API в HTML 5.

Answer 2

Вы можете изменить ширину и высоту на 100%, но это не распространяется на браузер Chrome или оболочку ОС.

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

Это имеет смысл, в противном случае вы можете создать теги img, которые покрывают оболочку, или теги h1, чтобы весь экран был буквой.

Answer 3

Альтернативное решение состоит в том, чтобы браузер просто предоставлял эту опцию в контекстном меню. Для этого не нужно иметь Javascript, хотя я мог видеть, когда это будет полезно.

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

Answer 4

Полное решение:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

Answer 5

Видео HTML 5 действительно работает в полноэкранном режиме в последней ночной сборке Safari, хотя я не уверен, насколько технически это возможно.

Answer 6

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

1. Используйте javascript, чтобы установить атрибут src полноэкранного видео на атрибут src меньшего видео
2. Установите для video.currentTime в полноэкранном видео то же самое, что и для небольшого видео.
3. Используйте css 'display: none', чтобы скрыть маленькое видео и отобразить большое с помощью 'position: absolute' и 'z-index: 1000' или чего-то действительно высокого.

Answer 7

Да. Хорошо, что происходит с видео HTML5, так это то, что вы просто добавляете тег <video>, и браузер предоставит свой собственный пользовательский интерфейс и, следовательно, возможность просмотра в полноэкранном режиме. Это действительно делает жизнь намного лучше для нас, пользователей, так как нет необходимости видеть «искусство», которое может сделать какой-то разработчик, играющий с Flash :) Это также добавляет согласованности платформе, что приятно.

Answer 8

все просто, все проблемы можно решить вот так,

1) всегда убегайте из полноэкранного режима (это не относится к ручному вводу полноэкранного режима через f11)

2) временно отобразить небольшой баннер, сообщающий, что в полноэкранный режим видео включен (браузер)

3) по умолчанию блокировать полноэкранное действие, как это было сделано для всплывающих окон и локальной базы данных в html5, а также в расположении API и т. Д.

Я не вижу проблем с этим дизайном. кто-нибудь думает, что я что-то пропустил?

Answer 9

Вы можете сделать это, если вы скажете пользователю нажать F11 (полноэкранный режим для многих браузеров), и вы разместите видео на всем теле страницы.

Answer 10

По состоянию на Chrome 11.0.686.0 dev channel В Chrome теперь есть полноэкранное видео.