目次
Reactでビデオからサムネイル画像を作る方法 | hook とuseRefを使えば実現できます
useRefとcanvasを使うと動画からサムネイルを作ることができます
import React, { useRef } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function App() { let nameRef2 = useRef(); const submitButton = () => { var canvas = document.getElementById("c"); canvas.getContext("2d").drawImage(nameRef2.current, 0, 0, 480, 270); }; return ( <div className="App"> <video ref={nameRef2} controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" width="480px" height="270px" /> <canvas id="c" width="480px" height="275px" /> <div> <button type="button" onClick={submitButton}> Submit </button> </div> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);
codesandbox でも試せるよ