`React Player` — компонент для воспроизведения видео. Он анализирует переданную ссылку и автоматически выбирает подходящий плеер. Если ссылка не поддерживается, используется стандартный HTML-тег `<video>`.
npm install @idem.agency/react-playerReact Player — компонент для воспроизведения видео.
Он анализирует переданную ссылку и автоматически выбирает подходящий плеер.
Если ссылка не поддерживается, используется стандартный HTML-тег .
src тега , доступного в коде вставки при выборе «Поделиться»;``ts`
preview: {
src: string;
alt: string;
};
`ts`
components={
button: {
/* компонент /
component: FCClass;
/* его пропсы /
props?: Record
},
previewPicture: {
component: FCClass;
props?: Record
},
}
`tsx
const PlayButton = (props) => (
);
const PreviewImage = () => (
);
components={{
button: {
component: PlayButton,
props: {
type: "button"
}
},
previewPicture: {
component: PreviewImage,
},
}}
/>
`
Также можно прокинуть класс на сам плеер, если есть превью.
`ts`
classNames={
player: 'custom-class'
}
`ts`
import '@idem.agency/react-player/css';
`ts`
type TPlayer = {
/* Превью для видео /
preview?: TPlayerPreview['preview'];
/* Ссылка на видео /
url: TPlayerBase['url'];
/* кастомные компоненты либы /
components?: TComponents;
/* кастомные классы для компонентов либы /
classNames?: TClassNames;
};
`tsx
import { Player } from '@idem.agency/react-player';
import '@idem.agency/react-player/css';
const urls = {
youtube: 'https://www.youtube.com/watch?v=0r9iEuDCnrw',
video: 'https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4',
rutube: 'https://rutube.ru/play/embed/20c1db3c9680dd6c11c5196e115389c3/',
vk: 'https://vkvideo.ru/video-230010077_456239088',
};
const urlsValues = Object.values(urls);
const App = () => {
return (