React video 파일의 썸네일을 간이적으로 표시하고 싶다(;´・ω・)

Create react app --typescript
에서 만든 프로젝트에, 비디오의 섬네일적인 것 표시하고 싶지만 좋은 컴포넌트가 발견되지 않는다.
비디오는 재생하지 않고, 비디오의 한 장면 부분을 잘라서 이미지만, 조금만 내고 싶습니다만, 좋은 구성 요소를 찾을 수 없습니다. |·`ω·)

react-video-thumbnail
htps //w w. 음 pmjs. 코 m / Pac 카게 / Rea ct
좋았기 때문에 당겨 왔습니다.

HtmlElement의 태그를 사용하여 동영상의 일부를 잘라냅니다.
yarn add react-video-thumbnail

가져왔습니다.
C:/Users/imo/e/components/qiita.tsx
TypeScript error in C:/Users/imo/e/components/qiita.tsx(7,28):
Could not find a declaration file for module 'react-video-thumbnail'. '/node_modules/react-video-thumbnail/dist/bundle.js' implicitly has an 'any' type.
  Try `npm install @types/react-video-thumbnail` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-video-thumbnail';`  TS7016

     5 | import Typography from '@material-ui/core/Typography';
     6 | import Boardcss from './StatsusBoard.module.css';
  >  7 | import VideoThumbnail from 'react-video-thumbnail';
       |                            ^
     8 |
     9 | 
    10 | interface qiitaProps {

.d.ts형 선언 파일이 없는 것 같습니다. TypeScript를 지원하지 않기 때문에 구름이 의심 스럽습니다.
npm install @types/react-video-thumbnail

404 오류가 발생했습니다.

any 타입의 형부를 실시하지 않는 형태로 읽었습니다.
const VideoThumbnail = require('react-video-thumbnail')
  <VideoThumbnail
 videoUrl="https://dl.dropboxusercontent.com/s/7b21gtvsvicavoh/statue-of-admiral-yi-no-audio.mp4?dl=1"
 width={120}
 height={80}
  />

실제로 실행했습니다.
@type
표시되었습니다.

화면을로드 할 때 동영상 파일의 원래 크기로 순간적으로 표시 될 수 있으며 타이밍에 따라 동영상 파일을 재생할 수 있습니다. 여러가지 시도해 튜닝이 필요할 것 같습니다.
아니면 뭔가 좋은 컴포넌트가 없는지 다시 찾아야 할 것 같습니다.

좋은 웹페이지 즐겨찾기