Как скрыть полноэкранную кнопку тега видео в HTML5

Ответ 1

Я думаю, что вы можете это сделать, изменив css для #document fragments, это спецификации DOM1 и поддерживаются всеми браузерами, но о стилизации я не уверен. Следующее решение webkit specific

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

Вот скрипка для этого.

Кроме того, как предлагает @paulitto, методы DOM могут быть реализованы после удаления атрибута controls из элемента <video>. Подробнее см. этот учебник.

PS: Как я его нашел? Перейдите в Chrome > Инструменты разработчикa > Настройки (значок шестеренки) > В разделе "Элементы" найдите Показать тень агента пользователя DOM, установите флажок. Вы сможете проверить базовый теневой DOM и их соответствующий стиль.

Ответ 2

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

Или вы также можете использовать внешние видео-плагины html5 для реализации этого

Ответ 3

Вам нужно просто написать этот код в своем css:

video::-webkit-media-controls-fullscreen-button {
    display: none;
}

И кнопка fulscreen будет скрывать

Ответ 4

Управление полноэкранным HTML5 работает в разных браузерах Firefox и Google Chrome. В chrome он отображает вариант загрузки, а не полный экран