Create react app --typescript
で作ったプロジェクトに、ビデオのサムネイル的なもの表示したいが良さげなコンポーネントがみつからない。
ビデオは再生せず、ビデオのワンシーン一部分を切り出して画像だけ、ひょこっと出したいのですが、よさげなコンポーネントが見つかりません。|・`ω・)
react-video-thumbnail
https://www.npmjs.com/package/react-video-thumbnail
が良さげだったので、引っ張ってきました。
HtmlElementのタグを使用して、ビデオの一部を切り取って
yarn add react-video-thumbnail
importしてきました。
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をサポートしていないようなので雲いきが怪しいですが、仕切り直しに@type
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}
/>
画面ロード時に、動画ファイルの元の大きさで一瞬表示されることがあり、、タイミングによっては動画ファイルが再生できてしまったりしmさう。色々試してみてチューニングが必要そうです。
または、別になにか良いコンポーネントがないか再度探し始める必要がありそうです