react

Reactで動画を埋め込む方法

Reactで動画を埋め込み、倍速などのコントローラーも設定する方法を解説します。

まずReactのプロジェクトを作りましょう。 

npm install -g create-react-app
create-react-app react-player
cd react-player

video-reactを使用して実装します。npmでインストールしましょう。

Video-Reactのサイト

https://video-react.js.org 
npm install --save video-react

公式サイトにしたがってコンポーネントを埋め込みましょう。App.jsを書き換えます。

import React, { Component } from "react";
import "./App.css";
import "video-react/dist/video-react.css"; // import css
import { Player, ControlBar, PlaybackRateMenuButton } from "video-react";

class App extends Component {
  componentDidMount() {
    this.player.playbackRate = 1;
    this.forceUpdate();
  }
  render() {
    return (
      <Player
        ref={c => {
          this.player = c;
        }}
        playsInline
      >
        <ControlBar>
          <PlaybackRateMenuButton order={7} rates={[2, 1.5, 1.0, 0.5]} />
        </ControlBar>
        <source
          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
          type="video/mp4"
        />
      </Player>
    );
  }
}

export default App;

解説します。

        <source
          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
          type="video/mp4"
        />

srcに再生したい動画のurlを指定してください。

        <ControlBar>
          <PlaybackRateMenuButton order={7} rates={[2, 1.5, 1.0, 0.5]} />
        </ControlBar>

PlaybackRateMenuButton で倍速を実装します。ratesに何倍速に変更できるようにするかを指定しましょう。orderでコントローラーの順番を指定します。右側に配置したいので今回は７にしました。

ローカルサーバーを起動して確認しましょう！

npm start

動画が埋め込まれて、コントローラーから速度を変更できるのが確認できると思います。

以上です。

Sponsored Link

-react