Вертикальное видео с полосой перемотки под ним. При наведении полоса утолщается, над ней появляется тонкий курсор с временем под указателем, а подписи текущего времени и длительности опускаются ниже.
Полосу можно схватить и тянуть: если увести курсор за её край, она упруго растягивается в ту сторону и сплющивается, а после отпускания пружинит обратно. При наведении на видео проявляется кнопка воспроизведения, иконки паузы и проигрывания сменяют друг друга с пружинным прыжком.
Скопируйте эти файлы в components/stretch-video-player/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { StretchVideoPlayer } from "@/components/stretch-video-player/stretch-video-player";
export function Player() {
return <StretchVideoPlayer src="/video.mp4" accentColor="#66d9e8" loop />;
}srcАдрес видео
Тип string
accentColor?Цвет курсора и времени, по умолчанию цвет бренда
Тип string
progressColor?Цвет заполненной части полосы
Тип string
stretch?Сила упругого растяжения полосы
Тип number·По умолчанию 50
maxHeight?Максимальная высота видео в пикселях
Тип number·По умолчанию 500
radius?Скругление видео в пикселях
Тип number·По умолчанию 32
loop?Повторять видео
Тип boolean·По умолчанию false
className?Классы корневого блока
Тип string