【UE4】動画ファイルの再生方法を分かりやすくまとめてみた
ムービーやチュートリアルに使える動画再生機能。
多くは既存記事と重複する内容となりますが、情報整理と備忘録を兼ね、動画ファイルの再生方法を自分なりに分かりやすくまとめてみました。
目次
動画ファイル ～ 準備編
はじめにUE4で扱える動画ファイルの形式をチェック。
めっちゃ色々ある！・・・ものの、形式によって各プラットフォームに対応していないケースが殆ど。特別な意図がない限りは、とりあえず全プラットフォーム対応の「mp4」形式でOK！
そして次に、現在デスクトップ上にUE4で扱いたいmp4動画がある場合。
これらの動画ファイルをインポートするために、デスクトップからコンテンツブラウザに直接ドラッグ＆ドロップ！・・・してはダメ！！！！！
この方法でも一応はエディター上・パッケージング後、共に動作するものの、元動画ファイルを移動・削除してしまうと再生不可能に・・・
（パッケージング後）
一見正常に動作しているようでも・・・
元動画ファイルを移動すると真っ白に
画像や音声ファイルの場合はインポート時に「元ファイルのコピー」がプロジェクト内部に保存されますが、動画ファイルの場合は「動画ファイルへのパス」のみを保存し取り扱うという仕様。
そのため、元ファイルを動かしてしまうとファイルの参照が切れてしまい、表示ができなくなる・・・という結果に。
動画のインポートが一瞬で済んだり、動画の差し替えが楽！という利点はあるものの、この仕様では動画ファイルの扱いに困るし、なにより作品配布が困難に。
その為、動画ファイルは次の方法で扱う必要があります。
1. 「Content」フォルダ直下に「Movies」フォルダを作成
ファイル名、作成場所は必ずこの通りに
コンテンツブラウザ上ではこのような表示に
２.「Movies」フォルダ内に動画ファイルをコピー
3. 「Movies」フォルダ内の動画ファイルを、UE4のコンテンツブラウザ内にドラッグ＆ドロップ
インポート元と同名の「File Media Source」が自動生成される
「File Media Source」をダブルクリック。
ファイルパスの表示が「../Movies/〇〇.mp4」という「相対パス」表示になっていればOK！ （「C:/Users/●●/Desktop/〇〇.mp4」のような「絶対パス」が表示されている場合は手順の見直しを）
ここで動作チェックのため、一度プロジェクトをパッケージ化。
パッケージ化の成功後、パッケージファイル内にインポートしたmp4動画が含まれていることを確認できれば準備成功！
動画ファイル ～ 表示編
動画のインポートが完了した現在の状態。
「File Media Source」が生成されている。
今回の目標はこの状態から動画をUI上で再生＆表示すること。
その場合、以下の手順で一連のアセットを作成していきます。
1. Media Player を作成
新規アセット「Media」→「Media Player」を作成。
リストアップされている「File Media Source」名をダブルクリックし、
動画が再生されることを確認。
ループ再生したい場合は「Loop」にチェックを。
このMedia Playerの存在はとても重要！
アイコンの見た目のとおり、どこかの異空間にあるテレビのような存在。このMedia Playerの再生内容をどうにかして画面に表示するため、後述のアセット一式を作成していきます。
2. Media Texture を作成
先ほどの Media Player の再生内容を表示するためのテクスチャを作成。
新規アセット「Media」→「Media Texture」を作成。
詳細タブ→「Media」→「Media Player」欄に先ほど作成したMedia Playerをセット。
Media Player作成時のダイアログにチェックを入れた場合、
上述のMedia Textureの作成＆設定は自動的に行われる。
3. Material を作成
お次は Media Texture を表示するためのマテリアルを作成。
Media Texture を右クリック → 「Create Material」でマテリアルを新規作成。
今回はウィジェット上に動画を表示させたいため、
詳細タブ→「Material」→「Material Domain」 設定を 「User Interface」に変更し、変更を適用。
4. Widget を作成
今度はマテリアルを表示させるためのウィジェットブループリントを作成。
5. BP を作成
最後にウィジェットを表示するブループリントを作成。
適当なブループリント（Actor）を作成し、ワールド上に配置。
変数を新規追加。変数の型を「Media Player」型に変更し、コンパイル。
詳細タブ → 「デフォルト値」に先ほど作成したMedia Playerをセット。
「Create Widget」→「Add to Viewport」で前項で作成したウィジェットを表示。
先ほど作成したMedia Player型の変数をグラフ上に配置 →「Open Source」ノードを追加＆再生したい動画を引数「Media Source」にセット。
そしてレベルをプレイすると・・・
動画再生！👍
以上、「動画ファイル」→「File Media Source」→「Media Player」→「Media Texture」→「Material」→「Widget」→「BP」という、バケツリレーのような流れによる実装でした。
お疲れさまでした・・・！！！
もっと深堀り ～ BP編
・再生動画を切り替え
「Open Source」ノードで動画を切り替え。
・Media Playlistアセット
複数の動画を連続で再生する為のアセット。
動画の再生が終了すると次の動画が自動的に再生される。使い所は限られるかも。
・再生速度を切り替え
「Set Rate」ノードで再生速度を変更。ただし、動画ファイルの形式によっては使用不可。
mp4形式の場合、再生速度の変更が可能。
avi形式の場合、再生速度の変更に加え、マイナス値指定で逆再生が可能。
・Medea Player 関連ノード色々
その他、
・「Can ～」：〇〇できるかどうかを取得
・「Is ～」：〇〇しているかどうかを取得
・「Get / Set ～」：データを取得 / セット
・「On ～」：Bindイベントを作成
など。
・Open Source後にご用心
（A）
「Open Source」直後に「Seek」ノードで再生時間を変更・・・
・・・しようとしても何故か出来ない・・・が！
（B）
間にDelayノードを挟み、0.2秒ほど処理を遅らせると動作するように。
この差は一体？「0.2秒ほど」・・・って曖昧では？（場合によっては0.2秒ではダメかも）
（C）
ここで実験。
「Is Ready」ノードでMedia Playerの状態を確認してみると、
Open Source直後の状態はFalse。Delayノード後はTrueという結果に。
よって、「Open Source処理の開始」から「メディアの再生準備が整う」までにはある程度時間がかかることが確認できました。メディアの再生準備が整うまでの間に「Seek」等のノードを実行した場合、実行処理が無視されるっぽい？
（C）の結果を踏まえ、（B）の処理を独自のマクロに置き換えてみた。スッキリ！
マクロの中身
１）Open Sourceノードを実行
２）Open Source処理が正常に行われたかどうかをBranchノードで判定。正常に行われなかった場合は、Print Stringでエラーメッセージを表示し、マクロ実行終了。
３）Media Playerの状態をIs Readyノードで確認。メディアの再生準備が整うまでループを回して待機。
４）マクロ実行終了。画面表示等の関係でマクロ終了をさらに遅らせたい場合は、Delayノードで遅延を追加。
・動画を2つ再生＆透明度を変化させながら表示
1.MediaPlayerと一連のアセットをもう一組作成
2.RetainerBox用のマテリアルを作成
パラメータ「Opacity」の値に応じてテクスチャの透明度を変化させるマテリアル
・Material Domain → User Interface
・Blend Mode → Translucent
RetainerBox についてはこちらの記事をご参考に。
[UMG]ディゾルブエフェクトもできる、RetainerBoxについて
3. ウィジェットを作成
・「BackgroundBlur」ウィジェットで背景をぼかす。
・「Image」ウィジェットを2つ配置。それぞれに別々の動画表示用マテリアルをセットすることで、動画（Media Player）を２つ扱えるように。
・「RetainerBox」ウィジェットを配置することで、子要素の「Image」ウィジェット（＝動画）の半透明表示を可能に。
RetainerBoxの詳細タブ → 「Effect」欄に、先ほど作成したRetainerBox用のマテリアルをセット。
ウィジェットの表示と同時に、動画を再生＆「Set Scalar Parameter Value」 ノードで
マテリアルパラメータ「Opacity」の値を徐々に変化させれば、
透明度を変化させながら動画を表示する処理が完成！👍
以上！
ご指摘・ご感想等がありましたらドシドシどうぞ🙏
【参考サイト一覧】
・Media Framework | Unreal Engine Documentation
・ブループリントでビデオの再生方法を制御する | Unreal Engine Documentation
・メディア フレームワークの技術リファレンス | Unreal Engine Documentation
・Media Player | Unreal Engine Documentation
・UE4 UMGでムービー（動画）を再生する 凛(kagring)のUE4とUnityとQt勉強中ブログ
・UE4 ゲーム内で動画を再生する方法 - PaperSloth’s diary
・[UE4] 動画ファイル(mp4など)をpakファイルに含めて外部から見えないようにしよう！ - Qiita
・[UMG]ディゾルブエフェクトもできる、RetainerBoxについて
