React video 파일의 썸네일을 간이적으로 표시하고 싶다(;´・ω・)
2566 단어 캔버스자바스크립트ReactTypeScript
에서 만든 프로젝트에, 비디오의 섬네일적인 것 표시하고 싶지만 좋은 컴포넌트가 발견되지 않는다.
비디오는 재생하지 않고, 비디오의 한 장면 부분을 잘라서 이미지만, 조금만 내고 싶습니다만, 좋은 구성 요소를 찾을 수 없습니다. |·`ω·)
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
표시되었습니다.
화면을로드 할 때 동영상 파일의 원래 크기로 순간적으로 표시 될 수 있으며 타이밍에 따라 동영상 파일을 재생할 수 있습니다. 여러가지 시도해 튜닝이 필요할 것 같습니다.
아니면 뭔가 좋은 컴포넌트가 없는지 다시 찾아야 할 것 같습니다.
Reference
이 문제에 관하여(React video 파일의 썸네일을 간이적으로 표시하고 싶다(;´・ω・)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ta2roo/items/7d97b7e704ce60e1232a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)