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

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

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

Ответы

Ответ 1

В HTML 5 нет способа сделать полноэкранный просмотр видео, но параллельная полноэкранная спецификация предоставляет метод requestFullScreen, который позволяет произвольным элементам (включая <video>) для полноэкранного просмотра.

У него экспериментальная поддержка в нескольких браузерах.

Оригинальный ответ:

Из спецификация HTML5 (на момент написания: июнь '09):

Пользовательские агенты не должны предоставлять открытый API для отображения видео полноэкранный. A script, в сочетании с тщательно обработанный видеофайл, может обмануть пользователя в был показан системно-модальный диалог, и попросите пользователя ввести пароль. Существует также опасность "простого", раздражение, при запуске страниц полноэкранные видеоролики, когда ссылки щелкнули или перешли на страницы. Вместо, особенности интерфейса пользователя и агента может быть обеспечено, чтобы для получения полноэкранного воспроизведения Режим.

Браузеры могут предоставлять пользовательский интерфейс, но не должны обеспечивать программируемый.

Обратите внимание, что вышеупомянутое предупреждение с тех пор было удалено из спецификации.

Ответ 2

Большинство ответов здесь устарели.

Теперь можно вставить любой элемент в полноэкранный режим с помощью Fullscreen API, хотя он все еще довольно беспорядок, потому что вы не можете просто вызвать div.requestFullScreen() во всех браузерах, но для использования префиксных методов с использованием браузера.

Я создал простую оболочку screenfull.js, которая упрощает использование полноэкранного API.

Текущая поддержка браузера:

Chrome 15 +
Firefox 10 +
Safari 5.1 +

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

Ответ 3

Safari поддерживает его через webkitEnterFullscreen.

Chrome должен поддерживать его, так как он также является WebKit, но ошибки отсутствуют.

Chris Blizzard из Firefox сказал, что выходит со своей версией полноэкранного режима, которая позволит любому элементу перейти на полноэкранный режим. например Canvas

Филипп Ягенштедт из Opera говорит, что они поддержат его в более поздней версии.

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

Ответ 4

webkitEnterFullScreen();

Это нужно вызвать в элементе тега видео, например, для полноэкранного просмотра первого тега видео на странице:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

Обратите внимание: это устаревший ответ и больше не имеет значения.

Ответ 5

Я думаю, что если мы хотим иметь открытый способ просмотра видео в наших браузерах без каких-либо закрытых исходных плагинов (и все нарушения безопасности, связанные с историей флеш-плагина...). Тег должен найти способ активировать полноэкранный режим. Мы можем справиться с этим, как flash: сделать полноэкранный режим, он должен быть активирован щелчком левой кнопкой мыши и ничего больше, я имею в виду, что ActionScript не запускается полноэкранный режим при загрузке вспышки на пример.

Надеюсь, я был достаточно ясен: ведь я всего лишь французский студент, а не английский поэт:)

См. Ya!

Ответ 6

Программируемый способ полноэкранного просмотра теперь работает как в Firefox, так и в Chrome (в последних версиях). Хорошей новостью является то, что здесь была спецификация:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

Вам все равно придется иметь дело с префиксами поставщиков, но все детали реализации отслеживаются на сайте MDN:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Ответ 7

Из CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

Ответ 8

Многие современные веб-браузеры реализовали API FullScreen, который позволяет полностью фокусироваться на определенных HTML-элементах. Это действительно отлично подходит для отображения интерактивных медиа, таких как видео, в полностью захватывающей среде.

Чтобы запустить полноэкранную кнопку, вам нужно настроить еще один прослушиватель событий, который будет вызывать функцию requestFullScreen() при нажатии кнопки. Чтобы убедиться, что это будет работать во всех поддерживаемых браузерах, вам также нужно будет проверить, доступен ли requestFullScreen() и отпадает ли версия префикса поставщика (mozRequestFullScreen и webkitRequestFullscreen), если это не так.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Ссылка: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Ссылка: - http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

Ответ 9

Firefox 3.6 имеет полный экран для видео в формате HTML5, щелкните правой кнопкой мыши видео и выберите "полный экран".

В новейших новинках Webkit также поддерживается полноэкранное видео HTML5, попробуйте Sublime player с последним вечером и удерживайте Cmd/Ctrl, выбрав полный экран.

Я думаю, Chrome/Opera также будет поддерживать что-то вроде этого. Надеюсь, IE9 также будет поддерживать полноэкранное видео HTML5.

Ответ 10

Это поддерживается в WebKit через webkitEnterFullscreen.

Ответ 11

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

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

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

Ответ 12

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

Ответ 13

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

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

Ответ 14

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

    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();
                    }
            }
    }

Ответ 15

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

Ответ 16

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

Ответ 17

Начиная с Chrome 11.0.686.0 dev-канал В Chrome теперь есть полноэкранное видео.

Ответ 18

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

Ответ 19

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

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

Ответ 20

это просто, все проблемы могут быть решены следующим образом:

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

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

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

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