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

Есть ли способ воспроизвести видео в полноэкранном режиме, используя HTML5? <video> тег ?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Safari поддерживает это до конца webkitEnterFullscreen.

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

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

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

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

webkitEnterFullScreen();

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

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

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

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

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

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

До встречи!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если у вас есть возможность определить свой сайт как прогрессивное веб-приложение (PWA), то есть также возможность использовать display: "fullscreen"в manifest.json . Но это будет работать только в том случае, если пользователь добавляет / устанавливает ваше веб-приложение на домашний экран и открывает его оттуда.

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

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

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

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

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

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

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

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

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

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