Пример первого плеера.
+ 00:00
100
/ ??:??
Пропустить
Закрыть настройки
Скорость воспроизведения
Качество видео
< Назад
< Назад
??:??

Пример второго плеера.
+ 00:00
100
/ ??:??
Пропустить
Закрыть настройки
Скорость воспроизведения
Качество видео
< Назад
< Назад
??:??

Особенности:
Небольшой баг: при большой длине видео подсказка у курсора мышки над бегунком видео показывает неточный тайминг, потому что этот тайминг высчитывается через положение курсора над блоком бегунка. А если щелкнуть, то видео перематывается по значению value в input type="range". Разные браузеры по-разному отображают положение ползунка бегунка и границы бегунка при крайних положениях ползунка. Решить эту проблему можно, например, отказавшись от браузерного input type="range" и написать свой аналог на div-ах. Если же ухватить ползунок бегунка, то будущий тайминг показывается верно.

Часть CSS стилей вынес из css-файла в HTML код, чтобы не портилась верстка, если файл css не успел загрузиться.

Бесплатные изображения для интерфейса взял отсюда, отсюда и отсюда.