Полноценный видеоплеер со своей панелью управления. Панель выезжает снизу, пока видео на паузе или над ним курсор, и прячется во время просмотра. Пробел запускает и останавливает воспроизведение.
При наведении на кнопку звука над ней появляется вертикальный ползунок громкости, а иконка динамика перечёркивается при выключении звука. Над полосой прогресса курсор показывает время в точке наведения, полосу можно тянуть для перемотки, а светлая подложка отмечает уже загруженную часть. Справа — субтитры, картинка в картинке и полный экран.
Скопируйте эти файлы в components/captions-video-player/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { CaptionsVideoPlayer } from "@/components/captions-video-player/captions-video-player";
export function Showreel() {
return <CaptionsVideoPlayer src="/video/showreel.mp4" progressColor="#66d9e8" radius={20} />;
}srcАдрес видеофайла
Тип string
progressColor?Цвет пройденной части полосы
Тип string·По умолчанию "#ffffff"
radius?Скругление плеера в пикселях
Тип number·По умолчанию 16
maxWidth?Максимальная ширина в пикселях
Тип number·По умолчанию 1024
aspectRatio?Пропорции кадра
Тип string·По умолчанию "16 / 9"
loop?Повторять видео
Тип boolean·По умолчанию true
showCaptions?Кнопка субтитров
Тип boolean·По умолчанию true
showPip?Кнопка «картинка в картинке»
Тип boolean·По умолчанию true
showFullscreen?Кнопка полного экрана
Тип boolean·По умолчанию true
className?Классы корневого блока
Тип string