Reactで動画再生する
はじめに
- お仕事でReactで動画再生する方法を検討する
- 調査したいこと、動画開始、終了イベント及び再生時間の取得ができるか
該当プラグイン
調べたところ下記の２つのプラグインがあることを知りstar数の数の多いreact-playerを検証してみる。
- video-react startの数：2.3k
https://github.com/video-react/video-react
- react-player startの数：6.7k
https://github.com/cookpete/react-player https://github.com/cookpete/react-player/issues/1474
サンプルコード
import React, { useState, useEffect, useRef } from 'react'
//import ReactPlayer from 'react-player/lazy'
import dynamic from "next/dynamic";
const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });
// https://video-ac.com/video/4648
// https://www.pexels.com/ja-jp/search/videos/%E9%A2%A8%E6%99%AF/?size=small&orientation=landscape
/*
https://stackoverflow.com/questions/68374975/get-total-played-time-with-react-player
*/
const Movie = () => {
const [hasWindow, setHasWindow] = useState(true);
const [started, setStarted] = useState<number>(0);
const [ended, setEnded] = useState(0);
const [isDisplay, setIsDisplay] = useState(false);
useEffect(() => {
if (typeof window !== "undefined") {
setHasWindow(true);
}
}, []);
const start = () => {
const start = new Date()
setStarted(start.getTime());
};
const end = () => {
const end = new Date()
setEnded(end.getTime());
setIsDisplay(true);
};
return (
<>
<div className="static">
<div className="flex justify-center mx-auto bg-white shadow-lg shadow-none rounded m-6 p-6">
{hasWindow &&
<ReactPlayer
url={'<動画のURLがはいります>'}
controls={true}
muted={true}
onStart={start}
onEnded={end}
volume={1}
/>}
</div>
<div className="flex justify-center mx-auto bg-white shadow-lg shadow-none rounded m-6 p-6">
{(ended - started > 0) ? `${(ended - started) / 1000}秒` : started === 0 ? '再生前' : `再生中` }
</div>
<div className="absolute top-2 left-96">
<div style={{display: isDisplay ? "block": "none"}} id="defaultModal" tabIndex={-1} className="overflow-y-auto overflow-x-hidden inset-0 z-50 top-10 flex justify-center items-center" aria-modal="true" role="dialog">
<div className="relative p-4 w-full max-w-2xl h-full md:h-auto">
<div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
<div className="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<h3 className="text-xl font-semibold text-gray-900 dark:text-white">
視聴完了
</h3>
<button type="button" className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="defaultModal">
<svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path></svg>
<span className="sr-only">Close modal</span>
</button>
</div>
<div className="p-6 space-y-6">
<div className="flex items-center pl-4 rounded border border-gray-200 dark:border-gray-700">
<input id="bordered-radio-1" type="radio" value="" name="bordered-radio" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
<label htmlFor="bordered-radio-1" className="py-4 ml-2 w-full text-sm font-medium text-gray-900 dark:text-gray-300">良かった</label>
</div>
<div className="flex items-center pl-4 rounded border border-gray-200 dark:border-gray-700">
<input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
<label htmlFor="bordered-radio-2" className="py-4 ml-2 w-full text-sm font-medium text-gray-900 dark:text-gray-300">普通</label>
</div>
<div className="flex items-center pl-4 rounded border border-gray-200 dark:border-gray-700">
<input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
<label htmlFor="bordered-radio-2" className="py-4 ml-2 w-full text-sm font-medium text-gray-900 dark:text-gray-300">悪かった</label>
</div>
</div>
<div className="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
<button data-modal-toggle="defaultModal" type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" onClick={() => {setIsDisplay(false)}}>設定</button>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default Movie
画面
- 再生開始、終了イベントの取得はできたが、再生時間の取得がうまくできなかった。
結論
- videojsだと再生開始・終了イベントを取得でき、且つ再生している時間を取得できるので、videojsがよさそうという結論になった
https://codesandbox.io/s/react-videojs-currenttime-zvlbn?file=/src/VideoPlayer.js:1070-1081 https://videojs.com/guides/react/ https://videojs.com/advanced?video=disneys-oceans
