Есть ли способ воспроизвести видео в полноэкранном режиме, используя HTML5? <video>
тег ?
И если это невозможно, кто-нибудь знает, есть ли причина для такого решения?
html
video
html5-video
fullscreen
nicudotro
источник
источник
Ответы:
HTML 5 не предоставляет способа сделать видео полноэкранным, но параллельная спецификация Fullscreen предоставляет
requestFullScreen
метод, который допускает произвольные элементы (включая<video>
элементы) быть полностью полноэкранными.Он имеет экспериментальную поддержку во многих браузерах .
Оригинальный ответ:
Из спецификации HTML5 (на момент написания: июнь '09):
Браузеры могут предоставлять пользовательский интерфейс, но не должны предоставлять программируемый.
Обратите внимание, что вышеупомянутое предупреждение было удалено из спецификации.
источник
Большинство ответов здесь устарели.
Теперь можно перевести любой элемент в полноэкранный режим, используя полноэкранный API , хотя это все еще беспорядок, потому что вы не можете просто вызвать
div.requestFullScreen()
все браузеры, но должны использовать префиксные методы, специфичные для браузера.Я создал простую оболочку screenfull.js которая упрощает использование полноэкранного API.
Текущая поддержка браузера:
Обратите внимание, что многие мобильные браузеры пока не поддерживают полноэкранный режим .
источник
Safari поддерживает это до конца
webkitEnterFullscreen
.Chrome должен поддерживать его, так как он также WebKit, но с ошибками.
Крис Близзард из Firefox сказал, что они выпускают собственную версию полноэкранного режима, которая позволяет любому элементу переходить в полноэкранный режим. например, холст
Филип Ягенштедт из Оперы говорит, что они поддержат его в более позднем выпуске.
Да, в спецификации видео HTML5 говорится, что она не поддерживает полноэкранный режим, но поскольку пользователи хотят ее, и каждый браузер будет поддерживать ее, спецификация изменится.
источник
Это необходимо вызывать для элемента video tag, например, для полноэкранного использования первого тега video на странице:
Обратите внимание: это устаревший ответ и больше не актуален.
источник
Во многих современных веб-браузерах реализован API-интерфейс FullScreen, позволяющий сфокусировать весь экран на определенных элементах HTML. Это действительно отлично подходит для отображения интерактивных медиа, таких как видео, в полностью погруженной среде.
Чтобы заставить полноэкранную кнопку работать, вам нужно настроить другого прослушивателя событий, который будет вызывать
requestFullScreen()
функцию при нажатии кнопки. Чтобы убедиться в том, что это будет работать во всех поддерживаемых браузерах, вам также необходимо проверить,requestFullScreen()
доступны ли они, и откатить версии поставщика с префиксом (mozRequestFullScreen
и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
источник
Программируемый способ сделать полноэкранный режим теперь работает как в 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, хотя я не уверен, насколько технически это возможно.
источник
Полное решение:
источник
Если у вас есть возможность определить свой сайт как прогрессивное веб-приложение (PWA), то есть также возможность использовать
display: "fullscreen"
в manifest.json . Но это будет работать только в том случае, если пользователь добавляет / устанавливает ваше веб-приложение на домашний экран и открывает его оттуда.источник
Да. Хорошо, что происходит с видео HTML5, так это то, что вы просто помещаете
<video>
тег, и браузер выдаст свой собственный пользовательский интерфейс и, следовательно, возможность просмотра в полноэкранном режиме. Это действительно делает жизнь намного лучше для нас, пользователей, так как не нужно видеть «искусство», которое может сделать какой-то разработчик, играющий с Flash :) Это также добавляет согласованности платформе, что приятно.источник
все просто, все проблемы можно решить вот так,
1) всегда иметь выход, чтобы вывести вас из полноэкранного режима (это не относится к ручному вводу полноэкранного режима через f11)
2) временно отобразить небольшой баннер, сообщающий, что включен полноэкранный режим видео (браузер)
3) блокировать полноэкранное действие по умолчанию, как это было сделано для всплывающих окон и локальной базы данных в html5, а также в расположении api и т. Д.
Я не вижу никаких проблем с этим дизайном. Кто-нибудь думает, что я что-то пропустил?
источник
Начиная с версии Chrome 11.0.686.0, канал Chrome теперь поддерживает полноэкранное видео.
источник
Вы можете сделать это, если вы скажете пользователю нажать F11 (полноэкранный режим для многих браузеров), и вы разместите видео на всем теле страницы.
источник
Если ни один из этих ответов не работает (как они не для меня), вы можете настроить два видео. Один для обычного размера, а другой для полноэкранного размера. Когда вы хотите переключиться в полноэкранный режим
источник