reactでのWeb動画再生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でセットしている動画ファイルを切り替える
となります。

■最後に

動画再生アプリについてまとめてみました。
こちらを真面目に作成するとyoutubeのような動画アプリが作れるのかな？
流石にあそこまで機能乗せるのは大変そう。。。

■参考

https://qiita.com/mehdi/items/95a250cd36fa11fd6856
https://www.npmjs.com/package/react-player