All Articles

react-youtubeを使ってYoutubeの動画を表示する

react-youtubeはYouTube IFrame Player API使用して、Reactで作ったサイト上に動画を表示することができます。 今回は、react-youtubeを使い込みます！

以下は、今回作ったデモです。 react-youtubeのDEMO

react-youtubeコンポーネントのプロパティ

videoId

再生する動画のvideoIdをセットします。 videoIdはYoutubeの動画のクエリストリングから取得します。 動画を視聴するURLについているクエリストリング:v=〇〇の〇〇部分がvideoIdになります。

 https://www.youtube.com/watch?v=pb_pcTy5C_M

opts

IFrame Playerに設定するオプションを指定します。 使用できるオプションは下記の通りです。

opts.height/opts.width

opts.heightとopts.widthは動画のサイズを指定します。 推奨されるサイズは下記の通りです。

  • 240p: 426x240 pixels
  • 360p: 640x360 pixels
  • 480p: 854x480 pixels
  • 720p: 1280x720 pixels
  • 1080p: 1920x1080 pixels
  • 1440p: 2560x1440 pixels
  • 2160p: 3840x2160 pixels

opts.playerVars

opts.playerVarsは、動画の再生に関するオプションを設定できます。

[playerVars] (https://developers.google.com/youtube/player_parameters)

opts.playerVars.autoplay

opts.playerVars.autoplayは、動画の再生準備が整った後に、自動で再生するかどうかを設定できます。

  • 0 : 自動再生しない(デフォルト)
  • 1 : 自動再生する
opts.playerVars.controls

opts.playerVars.controlsは、コントロール(シークバー・音量等)を表示するかどうかを設定します。

  • 0: コントロールを表示しない。
  • 1: コントロールを表示する。(デフォルト)
opts.playerVars.disablekb

opts.playerVars.controlsは、キーボードコントロール(キーボード入力による操作)の有効無効を設定します。

  • 0: キーボードコントロールを有効にする。(デフォルト)
  • 1: キーボードコントロールを無効にする。 サポートされているキーボードコントロールは下記の通りです。
  • space or kで: 再生/一時停止
  • ←: 現在のビデオの5秒前にジャンプします。
  • →: 現在のビデオで5秒前にジャンプ
  • ↑: ボリュームアップ
  • ↓: ボリュームダウン
  • f: フルスクリーン表示の切り替え
  • j: 現在のビデオの10秒前にジャンプします。
  • l: 現在のビデオを10秒前にジャンプ
  • m: ビデオのミュートまたはミュート解除
  • 0-9: 動画内のポイントにジャンプします。0 は動画の先頭にジャンプし、1 は動画の10%のポイントにジャンプし、2 は動画の20%のポイントにジャンプします。
opts.playerVars.loop

opts.playerVars.loopは、動画をループ再生するかを設定します。

  • 0: 0の場合はループ再生しません。(デフォルト)
  • 1: 1の場合はループ再生します。

(*IFrame 埋め込みではサポートされていません。)

opts.playerVars.start
opts.playerVars.end
opts.playerVars.fs
opts.playerVars.hl
opts.playerVars.ivloadpolicy
opts.playerVars.list
opts.playerVars.listType
opts.playerVars.origin
opts.playerVars.playlist
opts.playerVars.playsinline
opts.playerVars.rel
opts.playerVars.widget_referrer
opts.playerVars.modestbranding

opts.playerVars.modestbrandingは、プレーヤー上にYoutubeのロゴを表示するかどうかを設定します。

  • 0: Youtubeのロゴを表示します。(デフォルト)
  • 1: Youtubeのロゴを表示しません。ただし、小さな、Youtubeのテキストラベルは表示されます。
opts.playerVars.ccloadpolicy

パラメータの値を1に設定すると、ユーザーがキャプションをオフにしていても、デフォルトではクローズドキャプションが表示されます。デフォルトの動作は、ユーザーの好みに基づいています。

opts.playerVars.cclangpref

このパラメータは、プレイヤーがキャプションを表示する際に使用するデフォルトの言語を指定します。このパラメータの値をISO 639-1の2文字の言語コードに設定します。 このパラメータを使用し、ccloadpolicy パラメータを1に設定すると、プレーヤのロード時に指定された言語でキャプションが表示されます。ccloadpolicyパラメータも設定しない場合、キャプションはデフォルトでは表示されませんが、ユーザーがキャプションをオンにすることを選択した場合、指定された言語で表示されます。

opts.playerVars.color

このパラメータは、視聴者が既に見た動画の量を強調表示するためにプレーヤの動画プログレスバーで使用する色を指定します。 有効なパラメータの値は赤と白で、デフォルトでは、プレイヤーは動画プログレス バーで赤の色を使用します。色のオプションの詳細については、YouTube API ブログを参照してください。

opts.playerVars.enablejsapi

パラメータの値を1に設定すると、IFrame PlayerのAPI呼び出しでプレーヤを制御できるようになります。デフォルト値は0で、そのAPIを使用してプレーヤを制御することはできません。

onReady

onReadyは、動画の再生準備が完了したタイミングで呼ばれるコールバックを設定するためのプロパティです。 引数にはeventオブジェクトが渡され、このeventオブジェクトを使ってIFrame Playerを操作することができます。

onPlay

onPlayは、動画の再生が開始したタイミングで呼ばれるコールバックを設定するためのプロパティです。

onPause

onPauseは、動画の再生を一時停止したタイミングで呼ばれるコールバックを設定するためのプロパティです。

onEnd

onEndは、動画の再生が完了して停止したタイミングで呼ばれるコールバックを設定するためのプロパティです。

onError

onErrorは、何らかのエラー(videoIdが不正等)が発生したタイミングで呼ばれるコールバックを設定するためのプロパティです。

onStateChange

onStateChangeは、IFrame Playerのステータスが変化したタイミングで呼ばれるコールバックを設定するためのプロパティです。

onPlaybackRateChange

onPlaybackRateChangeは、IFramePlayerの再生速度レートを変更したタイミングで呼ばれるコールバックを設定するためのプロパティです。 引数のeventオブジェクトのdataフィールドに、変更後の再生速度レートが設定されています。

onPlaybackQualityChange

onPlaybackQualityChangeは、IFramePlayerの再生品質を変更したタイミングで呼ばれるコールバックを設定するためのプロパティです。 引数のeventオブジェクトのdataフィールドに、変更後の再生品質が設定されています。

Published 18 Nov 2020

Yona .Yona on Twitter