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

144

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

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

nicudotro
источник
@MiffTheFox Контрольный список функций поддержки современного браузера HTML5 можно найти здесь: findmebyip.com/litmus/#html5-web-applications
ghoppe
## Первое в мире настоящее полноэкранное видео HTML5 ## blog.jilion.com/2011/07/27/… См. Также: wiki.mozilla.org/Gecko:FullScreenAPI
Wouter Dorgelo

Ответы:

90

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

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


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

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

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

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


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

Quentin
источник
73

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

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

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

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

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

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

Синдре Сорхус
источник
Это не работает. Iframe1 имеет дочерний iframe2 от iframe2, когда применяется полноэкранный режим, он ничего не делает.
1
@YumYumYum из readme: «Если ваша страница находится внутри <iframe>, вам нужно добавить атрибут allowfullscreen (+ webkitallowfullscreen и mozallowfullscreen).»
Синдре Сорхус
Демонстрация не работает с браузером Android 4.3 по умолчанию.
Кай Ноак
@SindreSorhus это поддержка мобильных браузеров сейчас ??
Удара Суранга
31

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

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

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

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

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

Яэфф
источник
2
Ответ на этот вопрос устарел, смотрите ответ на Sindre Sorhus (а затем голосовать его так , что он обгоняет эти УСТАРЕВШИЕ ответы)
матовые ожоги
15
webkitEnterFullScreen();

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

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

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

jpkeisala
источник
Ответ на этот вопрос устарел, смотрите ответ на Sindre Sorhus (а затем голосовать его так , что он обгоняет эти УСТАРЕВШИЕ ответы)
матовые ожоги
Работаем в Chrome или Chromium и в Node-Webkit!
Виш
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 -ролики

Пн.
источник
6

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

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

До встречи!


источник
6

Из 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;
}
Монтасер
источник
2
Это не совсем полноэкранный режим.
RamenChef
5

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

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

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

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

Эрнест
источник
3

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

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

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

Рич Брэдшоу
источник
3

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

calavera.info
источник
Большой +1 за ссылку на этот список рассылки.
mwilcox
3

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

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

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

хриплый
источник
2

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

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

Andre
источник
1

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

st3v3
источник
Почему отрицательный голос? Safari 5 имеет полноэкранный режим управления. (Хотя API нет! Grrrr)
mwilcox
1

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

    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();
                    }
            }
    }
ммм
источник
0

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

Jernej Jerin
источник
-1

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

SeniorShizzle
источник
-1

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

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

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

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

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

АМК
источник
1
Это не отвечает на вопрос.
RamenChef
-1

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

Мохамед Мансур
источник
-1

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

Адриан Б
источник
-1

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

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