Help us understand the problem. What is going on with this article?

Reactアプリケーションで動画や音楽ファイルを扱うために「react-player」を使用する

More than 1 year has passed since last update.

Reactで音楽ファイルを扱いたい!

そもそもWebサービスで音楽ファイルをバリバリ扱う事自体が悪手だという意見は置いておいて,
Webサービス,特にReactを使用したUI開発を行っていて,音楽ファイルや動画ファイルを扱いたくなるときがあると思います.

Reactは周辺ライブラリが多く,「あれやりたいなー」と思ったら大体OSSを使用すれば実現する環境が整っています.
動画・音楽ファイルに関しても同じで,ブラウザ上でサウンドを再生したい,もしくは動画埋め込みコンポーネントを作りたいときに使用できるOSSが存在します.

それがreact-playerです.

react-playerとは

https://www.npmjs.com/package/react-player

動画や音楽ファイルをコンポーネントとして操作することができるようになるライブラリです.
というか,どちらかというと動画ファイルを簡単に扱うためのライブラリで,Youtube動画の埋め込みはもちろん,Facebookに投稿された動画やvimeo,twitchなどに投稿された動画をコンポーネントとしてUIに簡単に埋め込むことができます.
音声ファイルに関してはSoundcloudやMixcloudにアップロードされているものを埋め込むことが可能です.
ローカルファイルにおいてはmp3,mp4などが使用できます.

※IEで動作を保証するためにはbabel-polyfillを導入する必要があります.IE対応,難しいね…

使用できるファイルや動作確認については公式で用意されているデモページを参照してください.

インストール

npmコマンドやyarnコマンドで簡単に導入することが可能です.

install
$ npm install react-player --save #npmを使用するとき
$ yarn add react-player #yarnを使用するとき

使い方

ベーシックな使い方は以下のような感じになります.

reactPlayer.js
import React, { Component } from 'react'
import ReactPlayer from 'react-player'

class App extends Component {
  render () {
    return <ReactPlayer url='ここにファイル名を入れる' playing />
  }
}

propsについて

urlには,

  • ストリーミングサービスからの埋め込みの時:使用したい動画や音楽の配信URL
  • ローカルファイルを使用する場合:音楽ファイルもしくは動画ファイルを置いているパス

を記載します.

※ストリーミングサービスからの埋め込みでないローカルファイルを使用する場合,音楽や動画などのデータはAmazon S3やGoogle Cloudなどのオンラインストレージサービスにアップロードしておく必要があります

他,以下のprops(パラメータ)を渡すことで動画・音楽ファイルを制御することができます.
(よく使用しそうなもの一例)

props名 処理
url 動画・音楽ファイルのパス
playing 動画・音楽を再生するかどうか
loop ループするかどうか
controls ユーザーが動画ファイルをサービス固有のコントローラーで操作できるようにするかどうか(Vimeo,Twitchは設定に関係なくサービス特有のコントローラが表示される)
volume 音量(0.0~1.0の間で設定)
muted 音をミュートにするかどうか
playbackRate プレイバックレートを設定する(Youtube,Wistia,ローカルファイルのみサポート)
width 動画や音楽ファイルを埋め込むときの横幅
height 動画や音楽ファイルを埋め込むときの縦幅
style スタイルシートで装飾する場合に使用
config 使用するストリーミングサービスやファイル別にオーバーライドして使用したい設定を追加する

Facebookから動画を取得してコンポーネント化する場合

Facebookから動画を取得するには,FacebookのアプリIDを作成・登録する必要があります.
アプリIDを作成したら,configpropのfacebook内にappIdというpropsがあるので,ここに取得したappIdを記入します.

facebookConfig.js
<ReactPlayer
  url={'hogehoge'}
  config={
    facebook: {
      appId: '123456'
    }
  }
/>
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした