Есть ли способ сделать видео HTML5 полноэкранным?
https://stackoverflow.com/questions/1055214
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Есть ли способ воспроизвести полноэкранное видео с помощью HTML5? <video> ярлык?
А если это невозможно, знает ли кто-нибудь, есть ли причина такого решения?
Решение
HTML 5 не предоставляет возможности сделать видео полноэкранным, но параллельный Полноэкранная спецификация поставляет requestFullScreen метод, который позволяет произвольные элементы (включая <video> элементы) сделать полноэкранным.
В нем есть экспериментальная поддержка в ряде браузеров.
Оригинальный ответ:
Из спецификация HTML5 (на момент написания:Июнь 2009 г.):
Пользовательские агенты не должны предоставлять публичный API, чтобы показать видеоролики полноэкран.Сценарий, в сочетании с тщательно продуманным видеофайлом, может обмануть пользователя подумать о том, что был показан системный диалоговое окно, и предложит пользователю пароль.Существует также опасность раздражения «просто», когда страницы запускают полноэкранные видео, когда ссылки нажимают или наживают страницы.Вместо этого могут быть предоставлены специфические функции интерфейса пользователя, чтобы легко позволить пользователю получить полноэкранный режим воспроизведения.
Браузеры могут предоставлять пользовательский интерфейс, но не должны быть программируемыми.
Обратите внимание, что приведенное выше предупреждение было удалено из спецификации.
Другие советы
Большинство ответов здесь устарели.
Теперь можно перевести любой элемент в полноэкранный режим с помощью Полноэкранный API, хотя это все равно полный бардак, потому что нельзя просто позвонить div.requestFullScreen() во всех браузерах, но приходится использовать префиксные методы, специфичные для браузера.
Я создал простую обертку screenfull.js это упрощает использование полноэкранного API.
Текущая поддержка браузера:
- Хром 15+
- Фаерфокс 10+
- Сафари 5.1+
Обратите внимание, что многие мобильные браузеры, похоже, не поддерживают полноэкранный вариант еще.
Сафари поддерживает это через webkitEnterFullscreen.
Хром должен поддерживать его, поскольку это тоже WebKit, но ошибки отсутствуют.
Крис Близзард из Fire Fox сказали, что выпустят свою собственную версию полноэкранного режима, которая позволит любому элементу перейти в полноэкранный режим.напримерХолст
Филип Ягенстедт из Опера говорит, что они поддержат его в более поздней версии.
Да, в спецификации видео HTML5 указано, что полноэкранный режим не поддерживается, но поскольку пользователи этого хотят, и каждый браузер будет поддерживать его, спецификация изменится.
webkitEnterFullScreen();
Это необходимо вызвать в элементе тега видео, например, чтобы в полноэкранном режиме использовать первый тег видео на странице:
document.getElementsByTagName('video')[0].webkitEnterFullscreen();
Уведомление:это устаревший ответ и больше не актуален.
Я думаю, что если мы хотим иметь открытый способ просмотра видео в наших браузерах без каких-либо плагинов с закрытым исходным кодом (и всех нарушений безопасности, связанных с историей плагинов Flash...).Тег должен найти способ активировать полноэкранный режим.Мы могли бы справиться с этим, как это делает flash:чтобы сделать полноэкранный режим, его нужно активировать левым щелчком мыши и ничем больше, я имею в виду, что с помощью ActionScript невозможно запустить полноэкранный режим при загрузке флэш-памяти.
Надеюсь, я выразился достаточно ясно:В конце концов, я всего лишь французский студент-ИТ-специалист, а не английский поэт :)
До встречи!
Многие современные веб-браузеры реализовали полноэкранный API, который позволяет отображать полноэкранный режим для определенных элементов 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
Программируемый способ создания полноэкранного режима теперь работает как в Firefox, так и в Chrome (в их последних версиях).Хорошей новостью является то, что здесь был подготовлен проект спецификации:
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
Вам пока еще придется иметь дело с вендорными префиксами, но все детали реализации отслеживаются на сайте MDN:
Из 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;
}
Вы можете изменить ширину и высоту на 100%, но это не будет охватывать Chrome браузера или оболочку ОС.
Дизайнерское решение связано с тем, что HTML живет внутри окна браузера.Плагины Flash не находятся внутри окна, поэтому они могут работать в полноэкранном режиме.
Это имеет смысл, иначе вы могли бы создать теги img, закрывающие оболочку, или теги h1, чтобы весь экран представлял собой букву.
Нет, полноэкранное видео в HTML 5 невозможно.Если вы хотите знать причины, вам повезло, потому что спорная битва за полноэкранный режим ведется прямо сейчас.Видеть Список рассылки WHATWG и найдите слово «видео».Лично я надеюсь, что они предоставят полноэкранный API в HTML 5.
В Firefox 3.6 есть опция полноэкранного просмотра видео HTML5: щелкните видео правой кнопкой мыши и выберите «Полноэкранный режим».
Последние ночные версии Webkit также поддерживают полноэкранное видео HTML5, попробуйте Великолепный игрок с последней ночной версией и удерживайте Cmd/Ctrl при выборе полноэкранного режима.
Думаю, Chrome/Opera тоже будет поддерживать что-то подобное.Надеемся, что IE9 также будет поддерживать полноэкранное видео HTML5.
Это поддерживается в WebKit через webkitEnterПолный экран.
Альтернативным решением было бы просто предоставить браузеру эту опцию в контекстном меню.Для этого не обязательно иметь 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();
}
}
}
Да.Что происходит с HTML5-видео, так это то, что вы просто помещаете <video> и браузер предоставит собственный пользовательский интерфейс и, следовательно, возможность полноэкранного просмотра.Нам, пользователям, действительно становится намного лучше, когда нам не приходится видеть «искусство», которое может создать какой-нибудь разработчик, играющий с Flash :) Это также добавляет последовательности платформе, что приятно.
все просто, все проблемы можно решить вот так,
1) Получите Escape всегда вывести вас из полноэкранного режима (это не относится к вручную вручную полноэкранного по F11)
2) временно отобразить небольшой баннер с сообщением о входе в полноэкранный режим видео (браузером)
3) по умолчанию заблокировать полноэкранное действие, как это было сделано для всплывающих окон и локальной базы данных в html5, API местоположения и т. д. и т. п.
Я не вижу никаких проблем в этой конструкции.кто-нибудь думает, что я что-то пропустил?
Начиная с Chrome 11.0.686.0 канал разработчиков В Chrome теперь есть полноэкранное видео.
Вы можете сделать это, если скажете пользователю нажать F11 (полноэкранный режим для многих браузеров) и поместите видео на всю основную часть страницы.
Если ни один из этих ответов не сработал (как и у меня), вы можете создать два видео.Один для обычного размера, другой для полноэкранного.Если вы хотите переключиться в полноэкранный режим
- Используйте JavaScript, чтобы установить атрибут «src» полноэкранного видео для атрибута «src» меньшего видео.
- Установите параметр video.currentTime для полноэкранного видео таким же, как и для маленького видео.
- Используйте css «display:none», чтобы скрыть маленькое видео и отобразить большое с помощью «position:absolute» и «z-index:1000» или чего-то очень высокого.
