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

Question

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

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

Answer 1

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

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

---

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

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

Агенты пользователей не должны предоставлять публичный API для показа видео полноэкранный. Сценарий в сочетании с тщательно созданный видео файл, может обманом заставить пользователя задуматься системно-модальный диалог был показан, и запросить у пользователя пароль. Существует также опасность «просто» раздражение, с запуском страниц полноэкранные видео, когда ссылки нажали или страницы перемещались. Вместо, особенности интерфейса пользователя могут быть предоставлены, чтобы легко позволить пользователь для получения полноэкранного воспроизведения режим.

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

---

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

Answer 2

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

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

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

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

• Chrome 15 +
• Firefox 10 +
• Safari 5.1 +

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

Answer 3

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

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

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

Филип Джагенштедт из Opera говорит, что они поддержат его в более позднем выпуске.

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

Answer 4

webkitEnterFullScreen();

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

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

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

Answer 5

Во многих современных веб-браузерах реализован 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

Answer 6

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

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

Смотри Я!

Answer 7

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

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

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

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

Answer 8

Из 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;
}

Answer 9

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

Answer 10

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

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

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