Задать вопрос
yarkov
@yarkov
Помог ответ? Отметь решением.
javascript

Как сделать кастомные кнопки для HTML5 video?

Делаю видеозвонок на сайте с помощью EasyRTC.
Надо для тега video сделать свои кнопки, которые заменят родные элементы управления. Родные я скрыл, отображаю на :hover кастомные и пока видео не в фуллскрине, то кнопки работают.
А в полноэкранном режиме кнопки не кликабельны.
Кто-то сталкивался?
  • Вопрос задан
  • 1229 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
Stalker_RED
@Stalker_RED
На фуллскрин нужно включать не само видео, а контейнер-обертку
https://jsfiddle.net/Stalk/gq72u7y7/
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Можно еще попробовать стилизовать существующие элементы при помощи теневого DOM. Вот псевдоэлементы
video::-webkit-media-controls-fullscreen-button {}
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 {}
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Ещё заказы