UnityでVideoPlayerを使って動画の再生・停止をさせる

今回は、VideoPlayerコンポーネントを使って、動画の再生・停止をしてみたいと思います。

以前の記事

Unityゲーム内でMovieTextureを使って動画を再生する方法。

で、MovieTextureを使って動画を再生・停止をさせる事が出来ていますが、こちらは動画をUnityに取り込む時に、QuickTimeがパソコンにインストールされている必要があったり、細かい部分で不便な事がありました。

Unity5.6バージョン以降では、新たにVideoPlayerコンポーネントが登場し、MovieTextureに替わる新しい動画再生コンポーネントとなっています。

スポンサーリンク

Video Playerを使う

それでは、VideoPlayerコンポーネントを使ってみましょう。

Video Playerコンポーネントを取り付けるゲームオブジェクトの作成

VideoPlayerは、動画を再生するゲームオブジェクトに取り付けなくても動作させる事も出来ますが、一部そのゲームオブジェクトを使って再生させるモードもあるので、ゲームオブジェクト自身に取り付ける事にします。

VideoPlayerコンポーネントを取り付けるゲームオブジェクトを作成します。

ヒエラルキー上で右クリック→3D Object→Planeを選択します。

動画を写すPlaneを作成

↑のような感じで、縦に回転させ見えるようにします。

Planeは厚みがないので、Rotationの値によっては見えなくなります。

Planeの角度を変えて見えるようにする

Planeのインスペクタは↑のような感じで回転させました。

Unityに動画を取り込む

再生させたい動画をUnityに取り込みます。

Unityで再生出来る動画については、参考サイトを参照してください。

取りこんだ動画を選択し、インスペクタを見ると

動画のインポート設定

↑のように表示されています。

Importer VersionでMovieTextureに変更する事も出来ます。

Deinterlaceはインタレース解除の設定で、

Offはインタレース解除を行わない。
Evenはフレームの偶数行を使って補間
Oddはフレームの奇数行を使って補間

という設定です。

インタレース解除については

動画における「インターレース解除」の意味や仕組みについて簡単に紹介します。インターレース解除とは?インターレース解除とは、インターレース方式の動画をプログレッシブ方式の動画に変換する事を指します。(「デインターレース」とも呼びます) 参考:

で詳しく解説されていました。

Flip Horizontallyは動画を左右反対にします。
Flip Verticallyは動画を上下反対にします。
Import Audioにチェックを入れると、トランスコード中にオーディオトラックを取り込みます。

Transcodeにチェックを入れると、それ以下の設定にトランスコードします。

トランスコードは、デジタル信号をアナログ信号に戻さずにエンコードする処理みたいです。

トランスコードは元の動画をなるべく劣化させずエンコードし動画の設定を変える処理ですかね。

詳しい事はわかりません。

これで動画の取り込みが終了しました。

Video Playerコンポーネントの設定を見る

さきほど作成したPlaneのインスペクタでAdd ComponentからVideo→Video Playerを選択し取り付けます。

VideoPlayerのインスペクタ

SourceはVideoClipとURLで指定する事が出来、VideoClipはUnityに取り込んだ動画、URLは動画のアドレス(ローカル、WEB上)を指定します。
PlayOnAwakeにチェックを入れると、スタート時に動画を再生します。
WaitForFirstFrameはチェックを入れると動画の準備が出来るのを待ち、チェックを入れない場合は最初の数フレームを破棄してゲームと動画を同期させます。
Loopにチェックを入れると動画の再生が終わったら最初からまた再生します。
Playback Speedは動画の再生スピードで、1が通常スピードになります。
Render Modeは動画の再生方法ですが、設定項目がいくつかあるので画像とともに確認してみます。

Camera Far Plane

Camera Far Planeを選択すると描画するカメラを設定し、そのカメラから遠くに表示します。
Render Modeの下のCameraにはMain Cameraを設定し確認してみます。

CameraFarPlaneにした時

↑のように地面等よりも遠くに動画が再生されました。

Camera Near Plane

Camera Near Planeを選択するとカメラから近くに動画が表示されます。
CameraにはMain Cameraを設定して確認します。

Camera Near Planeの場合は、Main Cameraにすると見えないので下の項目のAlphaを少し下げて見えるようにします。

CameraNearPlaneにした時

↑のような感じになりました。

Render Texture

次はRender Textureを設定してみます。

Render Textureに関しては

Unityでカメラにレンダーテクスチャを設定しランタイムでテクスチャを更新し表示します。

を参照してください。

Assetsフォルダ内で右クリック→Create→Render Textureを選択し、レンダーテクスチャを作成します。

次にレンダーテクスチャを表示するUIを作成します。

ヒエラルキー上で右クリック→UI→Raw Imageを選択します。

親要素のCanvasのRender ModeをWorld Spaceにし他のゲームオブジェクトと同じ舞台にUIを表示します。

RenderTextureを設定するRawImage

RawImageのTextureに、さきほど作成したRender Textureを設定します。

RawImageにRenderTextureを設定

レンダーテクスチャを表示する実際の画像

↑のような感じでUIの位置と回転をしました。

次にVideo PlayerコンポーネントのTarget Textureに、さきほど作成したRender Textureを指定します。

VideoPlayerにレンダーテクスチャを設定

これで設定が完了したので確認すると

レンダーテクスチャで動画が再生された

↑のように作成したUIに動画が再生され表示されるようになりました。

Video PlayerのRender ModeをMaterial Overrideにすると、下の項目のRendererに設定したマテリアルを上書きして動画が再生されます。

例えば、このRendererにさきほど作成したPlaneのマテリアルを設定しておけば、Planeに動画が再生されることになります。

Material Overrideに設定

↑のように、さきほど作成したPlaneに動画が再生されるようになりました。

API OnlyはVideo Playerのtextureプロパティに内部テクスチャとして出力します。
API Onlyで出力したテクスチャのサンプルは後で作成します。

Render Modeについてはこんな感じです。

Camera Far PlaneとCamera Near Planeを選択するとAlpha項目、Aspect Ratioが表示されますが、
Alphaは動画の透明度の設定です。
Aspect Ratioは動画の画面サイズの合わせ方で

No Scalingは何もしない
Fit Verticallyは縦のサイズに合わせる
Fit Horizontallyは横のサイズに合わせる
Fit Insideはカメラの描画矩形に合わせますが、必要に応じて黒い領域が上下左右に表示されます。
Fit Outsideはカメラの描画矩形全体に合わせます。アスペクト比は維持されます。
Stretchは縦、横のサイズに合わせますがアスペクト比は維持されません。

Render ModeをMaterial Overrideにすると、Material Propertyが表示されますが、
Material PropertyはOverrideするマテリアルの種類を選択します。

Audio Output ModeはNone、Audio Source、Directが選択出来て、

Noneはオーディオを再生しません。
Audio SourceはAudio Sourceに音声を出力します。
Directはハードウェアに直接出力します(5.6ではまだサポートされていないみたいです)。

Trackはオーディオのトラックでチェックを入れると、オーディオを再生に利用します。

Audio Output Modeの場合はAudio Sourceを設定する項目があらわれるので、そこにAudio Sourceを設定します。

スクリプトから動画を操作する

MovieTextureと同じようにVideo Playerもスクリプトから操作する事が出来ます。

そこでMoviePlayerというスクリプトを作成し、Planeゲームオブジェクトに取り付けて実行してみます。

rImageはさきほど作成したRawImageを指定し、VideoPlayerのRender ModeをAPI Onlyにした時の内部テクスチャを表示するようにしてみます。

Video Playerの設定はインスペクタ上で出来ますが、今回はスクリプトから操作しています。

それを行っているのがStartメソッド内で、

の部分です。

まずはAudio Output ModeをAudio Sourceにしています。

今回の動画ではトラックが0番目しかないので、0番目のトラックを有効にし、その後出力先のAudio Sourceを指定しています。

指定しているAudio Sourceは、自身に取り付けたAudio Sourceを指定したいので、PlaneのインスペクタからAdd Component→Audio→Audio Sourceを取り付けてください。

Updateメソッドでは

mPlayer.textureがnullじゃない(Render ModeがAPI Onlyで内部テクスチャに出力されている)、かつ一度設定していない時に、

RawImageのテクスチャに出力した内部テクスチャを設定し、RawImageに動画が流れるようにしています。

マウスの左クリックをすると、動画の再生と停止を切り替えられるようにしています。

VideoPlayer.Play()が再生、VideoPlayer.Pause()が停止です。

それでは確認してみましょう。

RawImageのTextureはスクリプトから設定するので空にしておきます。

別に空にしなくてもいいんですが、ちゃんとスクリプトからテクスチャが設定されるかどうかわかりやすくなる為に、空にしています。

RawImageのTextureを空にしておく

Video PlayerのRender ModeをAPI OnlyにしたりMoviePlayerスクリプトのRawImageの設定等をします。

VideoPlayer等の設定

それでは実行してみましょう。

↑のようになりました。

RawImageを見てみると

一時テクスチャが設定される

↑のように、Textureにテンポラリー(一時的)なテクスチャが設定されている事が確認出来ます。

これはAPI Onlyで内部的に出力されたテクスチャですね。

すでにVideo PlayerのRender Modeを切り替えると、どのようになるかを画像で紹介しましたが、動画で確認してみたいと思います。

↑のようになりました。

VideoPlayerのRender Modeの違いが少しわかったんではないかと思います。

途中Material Overrideの確認をする為にCubeを作成し、カメラの目の前に置こうとしましたが時間がかかりました・・・・(^_^;)

MovieTextureよりVideoPlayerの方が使いやすい感じですね。(^_^)v

参考サイト

UnityスクリプトリファレンスーVideoPlayerー

[DRAFT 5.6] Video in Unity

スポンサーリンク

記事をシェアして頂ける方はこちら

フォローして頂くとやる気が出ます