UnityのWebGLでStreaming assetが使えない場合の動画再生方法です。
レンタルサーバーに動画をアップロードして、それをゲーム投稿サイトに投稿したゲーム内で再生するやり方について書き残しておきます。Xserverでしか試していないので、他のサーバーでは使えなかったり仕様が異なるかもしれません。また、サーバーもプログラミングも良く分かっていないので文章がおかしいかもしれません。ChatGPTさんに相談したらなんか再生できたので、詳しいことは分かりません。自己責任でお願いします。
目次
はじめに
UnityのWebGLで動画を再生する場合、URL指定でしか再生できないようです。アセットフォルダごとアップロードできるタイプの投稿サイトであればそのローカルファイルを指定することで再生できるようですが、unityroomのようなタイプの投稿サイトでは外部から呼び出す必要があります。しかし、アップロードした動画のURLをそのまま再生しようとしても、CORSという仕組みにより読み込むことが出来ません（同じドメインか、許可されたドメインからしかファイルを読み込めない、みたいなセキュリティ関係の縛りです）。
先に書いておきますが、WebGLでの動画再生は音量調節が出来ません（エディターでは完全に動くのに……）。それでも動画再生したい人向けの内容です。音声ファイルを別に分けて再生することはできます。
動画再生例（拙作）
AWSを使う方法
自分のサーバーを使いたくない方や、わざわざレンタルサーバーを契約したくない方は、こちらの記事を参考に、AWSを使う方法が良いのではないでしょうか。この記事のおかげで問題が分かったので助かりました。
unityroomの場合、当時とはゲームデータの置き場所のURLが変わっているようなので、CORS設定の際に
“https://99999.play.unityroom.com“
を指定するといいのでは（2023年6月現在）。数字部分にはゲームごとに異なる番号が入ります（ゲームページの「別タブで開く」などでURLを確認できます）。
実行URLは投稿サイトの仕様変更により変わるので、その都度対応しないと再生できなくなります。そんなの面倒だよという方はmp4再生は諦めて代替案を検討してください。
レンタルサーバーから読み込めたら楽なのになと思い今回の内容に至ります。全体を通してどちらが楽なのかは人によると思います。
レンタルサーバーを使う方法
今回はXserverを使っていますが、無料のレンタルサーバーでも.htaccessが編集できるタイプであれば可能なのではないでしょうか。そのあたりのことはサーバー次第です。
サーバー側の設定
- サーバーに接続し適当なディレクトリ（フォルダ）を作る
- そこに再生したい動画ファイル（mp4など）と.htaccessファイルをアップロードする
.htaccessの内容
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://99999.play.unityroom.com"
Header set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT"
Header set Access-Control-Allow-Headers: "Content-Type, x-http-method-override"
</IfModule>↑メモ帳にコピペするなどして.htaccessというファイル名で保存。
2行目のリンク先には、投稿先のゲームファイル置き場のURLを貼ります。上記はunityroomの場合で、99999の部分には5桁のゲームファイル置き場の番号（自分で決めたゲームIDではない）が入ります。ゲームページの「別タブで開く」のURLで分かります。
私の場合はサブドメインを作って、そこにmovieフォルダを作り.htaccessファイルと動画をアップロードしました。
一応補足すると、https://aaaaa.comというサイトにフォルダ「movie」をアップロードしてtest1.mp4を入れた場合、「https://aaaaa.com/movie/test1.mp4」というURLになります。
Unity側の設定
- 適当な四角形スプライトにインスペクターからビデオプレイヤーをつける
- そこにアップロードした動画のURLを貼り付ける
これで再生できると思います。
エディタで問題がなくてもアップロードすると上手くいかないことが多々あります（というかそれを解決するための記事です）。ビルドしてアップロードして再生できるか確認してください。
以前のキャッシュが残っているなどの理由ですぐに反映されないことがあります。開発者ツールなどからエラーを確認できます。
サーバーの状態により再生できない場合があるので、再生できていない場合の処理を作ったほうが良いです。拙作「レリックシャーク」では、数秒待っても再生されなければ、動画が再生されない旨を表示し次に進めるようにしています。そのあたりの処理は上述の記事で丁寧に解説して下さっているので割愛します。
別のゲームで再生したい場合には、その都度ゲームのIDを確認して.htaccessの記載URLを増やせば解決です（2行目を複製してIDを書き換える）。2023/8追記：別のフォルダを作って別々に設定するべきです。ChatGPTさんに複数のオリジンを設定するなと怒られました……。
PLiCyで動画を再生する
フリーゲーム投稿サイトPLiCyでは、制作者向けヘルプページに設定方法が書いてありました。
PLiCyで動画を再生したい場合の.htaccess例
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "https://html5.plicy.net"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT"
Header set Access-Control-Allow-Headers "*"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Expose-Headers "x-time"
</IfModule>
転送量
ChatGPT曰く、投稿サイト側の負荷はほとんどないとのことです。安心。少なくとも保存容量の削減にはなると思います……。
動画を置く側の負荷はというと、Xserverではかつて900GB/日の転送上限がありましたが、今は撤廃されています。かなり余裕がありそうです。1本100MBの動画が1000回再生されたとしても100GBの転送量です。
追記
スマホ向け
スマホの機種やブラウザなどの環境によっては動画を再生できないことがどうしてもあるようです。
こちらの記事を参考に、Unity 2022.1.0f1以降でビルドすることでAndroidから動画部分も再生できました。（拙作「ラーメンライスは大罪」で確認）
代替案
ここまで読んで「わざわざサーバー借りたり動画アップロードするのは大変そう」という方向けの代替案をいくつか挙げておきます。外部サーバーから呼び出すのは投稿サイトの仕様変更の影響を受けやすかったり、公式サポートされていなかったりとあまりおすすめできないので、頼らないに越したことはないです……。
- コマ撮りアニメーション化する
- ScreenToGifなどで動画を撮影→png連続画像で保存し、Unityでパラパラ漫画のようにアニメーションさせる
- 容量がかさみがち
- ゴリ押しではあるけど簡単で確実
- Unityで映像制作する
- 容量増加に注意
- モーフィングが使いこなせるとカッコいい
- タイムラインが便利
動画の種類によっては再現しようとすることで容量がかさんだり環境によって見え方が違ったりするので、使用用途に合わせて対応してください。
おわりに
ChatGPTさんに相談して解決できました。途中で「.htaccessではCORS設定はできない」とか「リバースプロキシが必要」とか素人には全く分からないことを言い始めて大変でした。やさしく教えてくださったのですが、それでも私の理解は及びませんでした。動画が再生できたのでOKです。
もし、記事の内容が間違っているとかセキュリティ的に不安があるとか、別の推奨方法があるとか、そもそも非推奨？……などのご指摘があればTwitterなどでご連絡いただけたらなと思います……。
映像制作に傾注しないでゲーム作りも頑張りたいものです。
