reactでのWeb動画再生playerアプリ
今回はReactで動画再生プレイヤーアプリの作成方法についてまとめておきたいと思います！！
動画再生Playerは、こちらのように動画の再生や停止、切り替えが行えるものです。
こちらのようなアプリ(サイトに近いかもしれませんが)を作成していきます。
■事前準備
動画再生Playerを作成するにあたり、ReactPlayerを用います。
ReactPlayerはこちらのコマンドでインストールが可能です。
yarn add react-player
■ReactPlayerを用いた動画再生
では、ReactPlayerを用いて動画再生を実装していきます。
まずは単一動画を表示してみます。
コードはこちらです。
import React, { Component } from 'react'
import ReactPlayer from 'react-player'
import Sam from '動画パス';
export default class Snow extends Component {
constructor (props) {
super(props);
this.state = {
PlayGrond:Sam,
};
}
render () {
const {PlayGrond} = this.state;
return(
<div>
<h1>動画再生アプリ</h1>
<ReactPlayer url={PlayGrond} id="MainPlay" playing loop controls={true} width="1280px" height="720px"/>
</div>
)
}
}ReactPlayerを使用すると動画を載せるのは簡単でして、
import ReactPlayer from 'react-player'
にて先ほどインストールしたライブラリを呼び出し、
render () {
const {PlayGrond} = this.state;
return(
<div>
<h1>動画再生アプリ</h1>
<ReactPlayer url={PlayGrond} id="MainPlay" playing loop controls={true} width="1280px" height="720px"/>
</div>
)
}というように、ReactPlayer タグを挿入するのみになります。
urlに再生した移動がを挿入すればOKです。
また今回は"loop"を指定していて、こちらは動画を繰り返し実施することを許可しており、
contorolsは再生や停止のボタンが表示させるか否かを示しております。
youtubeなどで動画にマウスカーソルを乗せると表示させるあれですね。
先ほどのコードを実行するとこのような形になります。
■動画リストからの動画切り替え
一番最初にお見せした感じに、動画リストを選択すると選択した動画が再生する方法について簡単にまとめておきます。
まず動画リストの構成ですがこちらのようになります。
return(
<div className="MoviePosition">
<DocumentMeta {...meta}></DocumentMeta>
<table>
<tbody valign="top">
<tr>
<td>
<div className="MainMovie">
<ReactPlayer url={PlayGrond} id="MainPlay" playing loop controls={true} width="1280px" height="720px"/>
<p>{PlayName}</p>
</div>
</td>
<td>
<p>{this.state.SubName1}</p>
<ReactPlayer className="SubMovie" url={SubPlay1} id="SubPlay1" onClick={this.ChangeImageFile} width="256px" height="144px" />
<p>{this.state.SubName2}</p>
<ReactPlayer className="SubMovie" url={SubPlay2} id="SubPlay2" onClick={this.ChangeImageFile} width="256px" height="144px" />
<p>{this.state.SubName3}</p>
<ReactPlayer className="SubMovie" url={SubPlay3} id="SubPlay3" onClick={this.ChangeImageFile} width="256px" height="144px" />
<p>{this.state.SubName4}</p>
<ReactPlayer className="SubMovie" url={SubPlay4} id="SubPlay4" onClick={this.ChangeImageFile} width="256px" height="144px" />
<p>{this.state.SubName5}</p>
<ReactPlayer className="SubMovie" url={SubPlay5} id="SubPlay5" onClick={this.ChangeImageFile} width="256px" height="144px" />
</td>
</tr>
</tbody>
</table>
</div>
);各動画にonClickをセットしておき、動画リストの任意の動画を選択するとChangeImageFile関数がコールされます。
このChangeImageFile関数は
ChangeImageFile = (e)=>{
this.setState({PlayGrond:e.target.src});
this.DoSelectChange(e.currentTarget.id);
}というように、eから選択されてたidを呼び出し、DoSelectChange関数を呼び出します。
DoSelectChange = (SelectTarget) =>{
const {PlayGrond} = this.state;
const {PlayName} = this.state;
switch(SelectTarget){
case "SubPlay1":
console.log("call SubPlay1");
this.setState({SubPlay1:PlayGrond});
this.setState({PlayName:this.state.SubName1});
this.setState({SubName1:PlayName});
break;
case "SubPlay2":
console.log("call SubPlay2");
this.setState({SubPlay2:PlayGrond});
this.setState({PlayName:this.state.SubName2});
this.setState({SubName2:PlayName});
break;
case "SubPlay3":
console.log("call SubPlay3");
this.setState({SubPlay3:PlayGrond});
this.setState({PlayName:this.state.SubName3});
this.setState({SubName3:PlayName});
break;
case "SubPlay4":
console.log("call SubPlay4");
this.setState({SubPlay4:PlayGrond});
this.setState({PlayName:this.state.SubName4});
this.setState({SubName4:PlayName});
break;
case "SubPlay5":
console.log("call SubPlay5");
this.setState({SubPlay5:PlayGrond});
this.setState({PlayName:this.state.SubName5});
this.setState({SubName5:PlayName});
break;
default:
break;
}
}このDoSelectChange関数はidを元に選択されたidの動画ファイルパスとメインで表示させている動画ファイルを切り替えております。
まとめますと、
①各ReactPlayer タグごとにOnClickを定義
②選択されたReactPlayer タグのidを記憶してonClickで定義した関数実行
③選択されたidとメインで流している動画のidでセットしている動画ファイルを切り替える
となります。
