【Unity】GitHub Pages を使って unityroom で動画を再生する

unityroom で動画を再生したい

WebGLで動画を再生するにはいくつか注意点があり、結構つまづきがちなポイントでもあります。特に unityroom のようなサイトに投稿する場合、動画ソース側に CORS の許可を与えなければなりません。
AWS を使う方法もあるみたいですが私にはﾖｸﾜｶﾗﾝので、ここでは GitHub Pages を使って動画を再生する方法をご紹介します。

対象読者

・Unity の基本的な使い方がわかる
・GitHub のアカウントを持っている

やり方

1. 動画を置いておくリポジトリを作る

自分のリポジトリページに行き、右上の "New" を選択

リポジトリの名前をわかりやすい名前にして "Choose visiblity" を Private に設定、この設定で作成します。

2. 動画のアップロード

作成したリポジトリのページに行き、"uploading an existing file." を選択

動画をドラッグ＆ドロップでアップロードします。コミットメッセージは適当に書いておきましょう。
動画の拡張子は mp4 にしておきましょう。mov では再生できませんでした。(その他の拡張子は要検証)

3. GitHub Pages の設定

上のタブから "Settings" → 左のタブから "Pages" を選択。
"Build and deployment" の "Branch" を main と root に設定して "Save" を押します。
デプロイには少し時間がかかるのでちょっと待ちます。

デプロイが終わるとこのような画面になります。
"Visit site" を選択。

そのままだと404エラーが出るのでURLの末尾に動画ファイル名を追加します。

例)
https://raspbell.github.io/testgame_video/
↓
https://raspbell.github.io/testgame_video/clip.mp4

ブラウザ上で動画が再生されればOKです。

4. Unity 側の設定

まずは適当な場所に "Create" → "Render Texture" で RenderTexture を作成します。名前は ScreenTexture とかにしときましょう。
作成した ScreenTexture を選択し、"Size" を再生する動画の解像度に合わせておきます。

Canvas を配置し、UI 要素として Raw Image を作成、これの "Texture" に ScreenTexture をアタッチします。
これが動画のスクリーンとなるので適当な大きさに調整しておきます。

Video Player の設定をします。
空オブジェクトを作成して Video Player コンポーネントを追加します。
"Source" を URLに変更し、URL の欄に GitHub Pages の動画リンク(動画ファイル名を追加したほう)を入力します。"Target Texture" には先程の ScreenTexture をアタッチします。

最後にスクリプト側で再生の設定をします。Video Player にはコンポーネントが有効になったタイミングで自動的に再生する "Play On Awake" というプロパティがありますが、これは WebGL では上手く機能しないらしいので、スクリプト側で再生タイミングを指定する必要があります。
シーンの再生時に自動的に再生したい、という場合なら以下のように書くと勝手に再生してくれます。

using UnityEngine;
using UnityEngine.Video;

public class VideoStarter : MonoBehaviour
{
    [SerializeField] private VideoPlayer _videoPlayer;

    private void Start()
    {
        _videoPlayer.Play();
    }
}

これでうまく再生できればOKです！ unityroom にアップロードして正常に再生できるかどうか確認してみてください。
お疲れ様でした！