【Unity】VideoPlayerの使い方 – 動画再生をマスターしよう!


ゲームやアプリの操作説明など、Unityに動画をインポートし、再生したい場面が多々あると思います。

今回は、VideoPlayerを使って動画を再生する方法を、例を交えながらご紹介します。

取り込んだ動画の扱い方に先ずは触れて、スクリプトを使わない再生方法、スクリプトを使った高度な再生方法の順に説明していきます。

動画をインポートする(VideoClip)

VideoPlayerの前に、Unityにおける動画の扱い方をご説明します。

任意の動画をインポートし、インスペクタを開いてみましょう。

なお、今回の例ではOleg Magni氏の動画を使わせて頂きます。

Fig 1. インポートした動画のインスペクタ
 Unityが扱える動画の拡張子は、.mp4、.mov、.wmvなど で、インポートされるとVideoClipというオブジェクトとなります。

基本的にこのままの状態ですぐ使えますが、オプションについても詳しく見ておきましょう。

  プロパティ   機能
  Deinterlace   インターレースするか否か
            Off   しない
            Even/Odd   偶数/奇数行を描画
  Flip Horizontally   水平方向に裏返す
  Flip Vertically   垂直方向に裏返す
  Import Audio   音声をインポートするか否か
  Transcode   プラットフォーム毎の設定

※補足: インターレースというのは、動画の描画方式の1つで、 各フレームを1行おきに走査 していきます。画質は落ちますが、時間当たりのフレーム数を稼げるので、より滑らかに見せることができる訳です。

Fig 2. 両方式の比較;前者が末行まで描画し終えた時、後者はまだ半分しか描画できていない。

※注意: MovieTextureは将来サポートされなくなるので、その説明は省略します。VideoPlayerと比較した使用例が公式ドキュメントにあるので、詳しくはそちらをご覧ください。

VideoPlayerを使って動画を再生する

早速、インポートした動画をVideoPlayerで再生してみましょう。

ここでは、描画先をオブジェクト(Plane)UI(RawImage)とする際の手順をご紹介します。

VideoPlayerの各プロパティについても付記します。

Planeに描画

先ず、シーンにPlaneを追加し、任意の位置・サイズを設定して下さい。これが動画を描画するスクリーンとなります。

次に、PlaneのAdd Componentから、VideoPlayerを追加して下さい。

Fig 3. Planeに追加したVideoPlayerコンポーネント

最後に、動画をVideoPlayerのVideoClipにアタッチすれば、準備完了です。

Mov 1. RawImageと区別が付くように、スクリーンは敢えて傾けています。

RawImageに描画

シーンにRawImageを追加し、VideoPlayerコンポーネントを追加するところまでは先ほどと一緒です。

Fig 4. RawImageに追加したVideoPlayerコンポーネント
 RenderModeがRenderTextureを選択していることを確認 し、適当に用意したRenderTextureをTargetTextureにアタッチして下さい。

同じRenderTextureを、RawImageのTextureにもアタッチすれば、準備完了です。

Mov 2. Cubeオブジェクトの手前で再生できているのが分かる。

VideoPlayerのプロパティ

インスペクタから設定できるプロパティは、次表の通りです。

全プロパティについては、公式ドキュメントをご覧ください。

  プロパティ   機能
  Source   動画ソース
            VideoClip   指定したVideoClip
            URL   指定したURLのファイル
  PlayOnAwake   Awakeで再生開始するか否か
  WaitForFirstFrame   最初のフレームが準備できるまで待つか否か
  Loop   ループさせるか否か
  SkipOnDrop   実時間に合わせてフレームを落とすか否か
  PlaybackSpeed   再生速度
  RenderMode   レンダリング方法
            Camera Far/Near Plane   カメラ映像の奥/手前の画面
            RenderTexture   RenderTexture
            MaterialOverride   マテリアルのテクスチャ
  Renderer   レンダリング先
  AudioOutputMode   音声の出力方法
            None   ミュート
            AudioSource   指定したAudioSource
            Direct   端末で直接出力

VideoPlayerをスクリプトから使う

今度はスクリプトからVideoPlayerを操作し、より高度な再生方法を設定してみましょう。

ここでは、ボタンで再生を制御する例複数のVideoClipを再生する例をご紹介します。

一時停止ボタン

ボタンで動画を一時停止するのが目標です。

スクリプトからVideoPlayerを使う例としては、最もシンプルなものではないでしょうか。

次のスクリプトを作成し、スクリーンにアタッチして下さい。

ボタンに関しては、以下の記事をご覧ください。

(関連記事:【Unity uGUI】ボタン(Button)の基本的な使い方を徹底解説!

上記スクリプト(CustomVP)のVideoClipとScreenを設定し、ボタンにVPControl関数を結びつければ、準備完了です。

Mov 3. ボタンを押すと、一時停止する。

複数のVideoClip

複数の動画を連続再生するのが目標です。

今回はコルーチンという機能を使います。これ自体についての詳しい説明は、後述の補足をご覧ください。

次のスクリプトを作成し、スクリーンにアタッチして下さい。

これまではVideoPlayerコンポーネントをPlaneオブジェクト自体に追加しましたが、この例のように 別個にVideoPlayerオブジェクトを用意する 方法もあります。

最後に、VideoClipListのサイズを指定し、そこへ各VideoClipをアタッチすれば、準備完了です。

Mov 4. 3つの動画が連続再生される。

※補足: コルーチンとは、 反復処理中で呼び出す際に中断・再開が可能な関数のようなもの です。C#ではIEnumeratorとして宣言し、次のように扱います。

  • 呼び出し: StartCoroutine(“name”)
  • 中断: yield return null
  • 中断(時間指定): yield return new WaitForSecond()
  • 途中終了: return break
  • 終了: StopCoroutine(“name”)

おまけ1:別音声を付ける

動画のとは別の音声(BGMなど)を付けたい場合は、AudioSourceコンポーネントを使いましょう。

 VideoPlayerをミュートし、スクリーンにAudioSourceコンポーネントも追加 すれば完了です。

AudioSourceの扱い方は、今回のVideoPlayerと非常によく似ています。

復習も兼ねて、ぜひ実装してみましょう。

おまけ2:パノラマ・シアターを作る

パノラマで撮った画像・動画を再生したい場合は、PlaneではなくSphereの内側に描画しましょう。

球に次のシェーダを掛けるだけです。

シェーダに関して詳しく学びたい方は、以下の記事をご覧ください。

(関連記事:【Unity】Shader Graphの使い方を分かりやすく解説!シェーダーとは?

まとめ

以上、VideoPlayerを使って動画を再生する方法のご紹介でした。

双眼表示のシェーダも組み合わせれば、すぐさまVRシアターを作ることができます。

AudioSourceやシェーダと併せて、ぜひ色々いじってみて下さい。

それでは、楽しいXR開発を!

(関連記事:【Unity】スマートフォンをARゴーグル化する方法


この記事はいかがでしたか?
もし「参考になった」「面白かった」という場合は、応援シェアお願いします!

株式会社x gardenが運営するXR-Hubの記事編集部です。

読者の皆様に役に立つ情報を発信いたします。

シェアする