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

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

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

 Wouter Dorgelo31 дек. 2011 г., 03:06
## Первое в мире настоящее полноэкранное видео HTML5 ## Blog.jilion.com / 2011/07/27 / ... Также см: Wiki.mozilla.org / Gecko: FullScreenAPI
 ghoppe22 апр. 2010 г., 21:09
@ MiffTheFox Контрольный список функций поддержки современного браузера HTML5 можно найти здесь: Findmebyip.com / бумажка / # html5-веб-приложение

Ответы на вопрос(20)

Safari, хотя я не уверен, как это технически достигнуто.

 mwilcox16 июн. 2010 г., 17:37
Почему голосование отрицательное? Safari 5 имеет полноэкранный режим в своих элементах управления. (Хотя API нет! Grrrr)

n, позволяющий сфокусировать весь экран на определенных элементах 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_mod Ссылка:-http: //blog.teamtreehouse.com/building-custom-controls-for-html5-video

но это не распространяется на браузер Chrome или оболочку ОС.

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

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

 Ashley Davies28 сент. 2012 г., 19:59
+ 1 для всего экрана, являющегося буквой

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

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

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

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

От 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;
}
 RamenChef21 дек. 2017 г., 16:59
Это не совсем полноэкранный режим.
Решение Вопроса

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

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

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

От HTML5 spec (на момент написания: июнь '09):

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

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

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

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

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

Текущий браузер поддерживает:

Chrome 15 + Firefox 10 +Safari 5.1 +

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

 Udara Suranga20 янв. 2017 г., 07:12
@ SindreSorhus - теперь эта мобильная поддержка поддерживается ??
 YumYumYum29 янв. 2014 г., 07:48
Это не работает. Iframe1 имеет дочерний iframe2 от iframe2, когда применяется полноэкранный режим, он ничего не делает.
 Sindre Sorhus29 янв. 2014 г., 11:04
@ YumYumYum из readme: «Если ваша страница находится внутри <iframe>, вам нужно добавить атрибут allowfullscreen (+ webkitallowfullscreen и mozallowfullscreen)."
 Kai Noack30 мар. 2014 г., 23:50
Демонстрация не работает с браузером Android 4.3 по умолчанию.

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

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

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

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

 RamenChef19 дек. 2017 г., 20:33
Это не отвечает на вопрос.

Сафар поддерживает это черезwebkitEnterFullscreen.

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

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

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

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

 matt burns27 сент. 2012 г., 19:04
Этот ответ устарел, посмотрите ответ Синдре Сорхуса (а затем проголосуйте, чтобы он опередил эти устаревшие ответы)

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

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

Увидимся

канал В Chrome теперь есть полноэкранное видео.

щелкните правой кнопкой мыши по видео и выберите «Полный экран».

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

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

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

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

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

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

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

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

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

 matt burns27 сент. 2012 г., 19:04
Этот ответ устарел, посмотрите ответ Синдре Сорхуса (а затем проголосуйте, чтобы он опередил эти устаревшие ответы)
 YumYumYum29 янв. 2014 г., 10:26
+ 1 это сработало, мгновенно
 Vish30 дек. 2015 г., 07:59
Работа в Chrome или Chromium и в Node-Webkit!

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

 mwilcox16 июн. 2010 г., 17:36
Большой +1 за ссылку на этот список рассылки.

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

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

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

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

Ваш ответ на вопрос