【Unity】WebGLでVideo Playerを使用して動画を再生する

WebGLでVideo Playerを使用する際に、Standaloneプラットフォームと同様にVideo Clipを使用すると動画が再生されません。
この記事ではWebGLでVideo Playerを使用して動画をする方法を紹介します。

Video Playerの基本的な使い方は以下をご確認ください。

サンプルアプリ(WebGL)

※プレイするときは一度画面をクリックしてください。

別ページでプレイする場合はこちらから
https://chiritsumo-blog.com/wp-content/uploads/webgl/VideoPlayer/index.html

環境

  • Windows 10 Home
  • Unity Version 2019.2.17f1

問題:WebGLではVideo Clipが使えない

現状では、WebGLでVideo Playerを使用するときSourceにVideo Clipは使えないようです。

そのため、Video PlayerのSourceを「URL」に設定して以下のいずれかの方法で動画ファイルをロードする必要があります。

  • サーバーにアップロード済みの動画を取得
  • StreamingAssetsから動画を取得

方法①:サーバーにアップロード済みの動画を取得

この方法では事前にWebGLアプリケーションをアップロードするサーバーに動画ファイルをアップロードし、アクセスできるようにしておく必要があります。

Video Playerコンポーネントの「Source」を「URL」に変更して、その下の「URL」に動画ファイルのURLを入力することで動画ファイルが再生可能です。

Unityエディタ Video Playerのソースを変更

方法②:StreamingAssetsから動画を取得

StreamingAssets内にある動画ファイルをVideo PlayerのSourceとして読み込むことができます。

Assetsフォルダの直下にフォルダを新規作成して「StreamingAssets」フォルダを作成します。

UnityエディタでStreamingAssetsフォルダ作成

「StreamingAssets」フォルダを作成する際に、入力ミスの無いようにしてください。
1文字でも間違えると、正常に参照することができなくなります。

StreamingAssetsフォルダに動画ファイルを追加します。

UnityエディタでStreamingAssetsフォルダに動画をインポート

Video PlayerのソースにStreamingAssets内の動画ファイルを設定するスクリプトを作成します。

using UnityEngine;
using UnityEngine.Video;

[RequireComponent(typeof(VideoPlayer))]
public class VideoLoader : MonoBehaviour
{
    [SerializeField]
    private string relativePath;

    // Start is called before the first frame update
    void Start()
    {
        VideoPlayer player = GetComponent<VideoPlayer>();
        player.source = VideoSource.Url;
        player.url = Application.streamingAssetsPath + "/" + relativePath;
        player.prepareCompleted += PrepareCompleted;
        player.Prepare();
    }

    void PrepareCompleted(VideoPlayer vp)
    {
        vp.prepareCompleted -= PrepareCompleted;
        vp.Play();
    }
}

作成したスクリプト(VideoLoader.cs)をVideo Playerを持つゲームオブジェクトに追加します。

Unityエディタ GameObjectにVideo Loaderスクリプトを追加

InspectorウィンドウでVideoLoaderの「Relative Path」にStreamingAssets内の動画ファイルへの相対パスを設定します。
動画ファイルが Assets/StreamingAssets/Quang Binh – 32414.mp4 の場合 「Quang Binh – 32414.mp4」を設定します。

UnityエディタでVideoLoaderスクリプトの設定を行う

以上でStreamingAssetsから動画を取得ための設定は完了です。
WebGLでビルドすると、index.htmlと同じ階層のフォルダに「StreamingAssets」フォルダが出力されます。

トラブルシューティング

動画が再生されない (has been blocked by CORS policy)

動画が再生されず、ブラウザの開発者ツールのコンソールに以下のようなメッセージが出ている場合について記載します。

Access to video at '(動画ファイルURL)' from origin '(WebGLアプリURL)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS(Cross-Origin Resouces Sharing)を日本語訳するとオリジン間リソース共有で、
上記のエラーメッセージの簡単に説明すると、
同じオリジン(プロトコル+ドメイン+ポート番号)からのリソース共有でないので、
ポリシーによりブロックされました。

という内容となっています。

このエラーは、WebGLアプリケーションと動画ファイルを同じサーバーに配置することで解決可能と思われます。


参考:
https://forum.unity.com/threads/videoclip-support-in-webgl-builds.495805/

よく読まれている記事

コメント

  1. […] […]

タイトルとURLをコピーしました