【UE5】動画が再生できなかったのでその対処法


バージョン：UE5.0.0

# はじめに
UnrealEngine5.0.0で動画(mp4, avi等)が再生できなかったので代替方法を書いてみました。
初めての記事なので見にくいかもしれませんがご容赦を m(-_-)m

# 目次
[1. BinkVideoの導入](#1-binkvideoの導入)
[2. 動画(mp4, avi等)を bk2 に変換](#2-動画mp4-avi等を-bk2-に変換)
[3. UE5へ動画をインポート](#3-ue5へ動画をインポート)
[4. ゲーム内で動画を再生する](#4-ゲーム内で動画を再生する)
[5. まとめ](#5-まとめ)

# 1. BinkVideoの導入
**プラグインの有効化**
BinkVideoはプラグインなので有効化をする。
ビルトイン > Media Players 内
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/f5f77989-958e-b67e-dafa-fa032867eb8a.png)
プロジェクトの再起動をする必要があるので再起動をします。


# 2. 動画(mp4, avi等)を bk2 に変換
**BinkVideoで再生をするには動画の形式を「bk2」に変換する必要があります。**
今回は、H.264/AAC(mp4形式)の動画を使いますが、他の拡張子でも大体は問題ないと思います。

**圧縮に使用するツールはエンジンに付属しています。**
[エンジンのディレクトリ]\UE_5.0\Engine\Binaries\ThirdParty\Bink\Bink2ForUnreal.exe
にあります。
>**エンジンのディレクトリがわからない場合**
ランチャーから新しくエンジンをインストールしようとしたときに表示される場所の可能性が高いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/58d235fe-c2eb-c7ff-dd21-758b41d13c8e.png)

**Bink2ForUnreal.exeを起動**
Bink2ForUnreal.exeを起動するとこのような画面が開くと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/e10791be-369c-f4ae-f13b-2b63cf0e1943.png)
この画面で変換したい動画を選択し、Bink 2 Tools for Unreal 内の Bink it! 選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/5c3361e9-e36c-119a-fab1-623ba30df2ae.png)
Bink Compressor というウィンドウが開きます。
Output file info: の部分が bk2 ファイルの出力場所に関する部分です。
(Browse... から保存場所の変更も可能です。)
右のアイコンの下の Bink ボタンを押せば変換が始まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/e45afc4c-461c-b225-e461-2acb4abd8b8f.png)
**↓** 変換のウィンドウ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/a12c703d-2ed0-0db0-857d-0c6fd08215e6.png)
変換が完了すると StatusがDone!になっていたり、CancelボタンがDoneボタンになっています。
すでに変換が終わったのでDoneボタンを押してツールを閉じても大丈夫です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/b317a783-0b22-7639-7a09-113a140cc8cc.png)
保存場所を見に行くとこんな感じのファイルができています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/d52b7ba5-65f7-653c-0ef3-9be9367311e5.png)

# 3. UE5へ動画をインポート
UE5へのインポート方法は他の動画と同じやり方です。
まず作成した bk2ファイルを「Content\Movies」フォルダに入れましょう。(Moviesフォルダがない場合は作る。)

**BinkVideoのインポート**
bk2ファイルをプロジェクトのコンテンツブラウザにD&Dを行うとBinkMediaPlayerが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/d0ed0b3a-9a22-00dc-dd24-0cc0ca19b9b6.png)
作成されたBinkMediaPlayerを開くと実際に動画が再生されると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/caa7e280-c716-987c-b4ba-57c3e7c18c3f.png)

# 4. ゲーム内で動画を再生する
**メディアテクスチャの作成**
作成したBinkMediaPlayerを右クリックし上のほうにあるメディアテクスチャを作成を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/91ece5e5-14dd-fb3b-9d0e-6bc57b4c1b51.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/c742448c-7f3e-9b43-cd74-1a0ef6692429.png)
後は作成したメディアテクスチャをメッシュに張り付けたりすると動いている様子が見れます。

**ウィジェットで再生してみる**
ウィジェットにImageを配置し アピアランス > Brush の中にある image を先ほど作成したメディアテクスチャに設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/71c85168-7469-ac40-f329-f7323d919622.png)
この状態でウィジェットを設定しプレイすれば再生されますが停止や再生などができないのでブループリントに処理を書いていきます。
まずは Bink Media Player型の変数を作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/edf22521-6f43-187a-2e61-db045359e219.png)
次は変数の中身をインポートした動画に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/71f11ecb-61a2-5c07-fbc3-a826aa25dc9c.png)
あとは変数から停止、再生を呼べば操作ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366469/b4abb7d8-f7b0-fd72-5ab3-ffedb715f94d.png)

**注意事項**
Stopを呼ぶとMediaPlayerに読み込んだ動画の情報が消えてしまうためPauseを使うといい。
もし消えてしまった場合はOpenUrlノードから再読み込みできる。

# 5. まとめ
こんな感じに使うことができます。
<iframe width="720" height="480" src="https://www.youtube.com/embed/HBkXUfyIN78" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

~~UE5.0.1 とかでは普通に再生できるようになるといいな～~~
修正来ないかな～（´・ω・｀）