【Unity】WebGLで動画再生のフォールバックを実現する

<video autoplay="" muted="" playsinline="">
    <source type="video/webm" src="[ストレージサーバーのURL]/movie.webm">
    <source type="video/mp4" src="[ストレージサーバーのURL]/movie.mp4">
</video>

canPlayType(type)

mergeInto(LibraryManager.library, {
  CanPlayType: function(format) {
    // <video>タグを作成
    var video = document.createElement('video');
    
    if (typeof video.canPlayType === 'function') {
      var result = video.canPlayType(UTF8ToString(format));
      
      // 結果をJS文字列をUTF8に変換して返す
      var bufferSize = lengthBytesUTF8(result) + 1;
      var buffer = _malloc(bufferSize);
      stringToUTF8(result, buffer, bufferSize);
      return buffer;
    }
    
    // 非対応の結果を返す
    return 0;
  }
});

// .jslibで実装したメソッドを使えるようにする
[DllImport("__Internal")]
private static extern string CanPlayType(string format);

・・・（中略）・・・

// ブラウザがサポートしている動画形式かどうかを判定
string canPlay = CanPlayType("video/webm");

VideoPlayer videoPlayer;

・・・（中略）・・・

videoPlayer.source = VideoSource.Url;
videoPlayer.url = "https://ドメイン/movie.webm";
videoPlayer.Play();

videoPlayer.errorReceived += (source, message) =>
{
    Debug.LogError($"VideoPlayer Error: {message}");
    
    // 2回エラー通知が来ることがあるため、URLをチェック
    if(!message.Contains(source.url))
        return;

    // 次の動画を再生

VideoPlayer Error: VideoPlayer cannot play url : 動画へのURL

using System;
using System.Runtime.InteropServices;
using UnityEngine;
using UnityEngine.Video;

public class FallbackVideoPlayer : MonoBehaviour
{
    // 再生対象のVideoPlayer
    [SerializeField] private VideoPlayer _videoPlayer;

    // 動画の形式とURLの情報
    [Serializable]
    private struct VideoInfo
    {
        // 動画形式
        public string format;

        // 動画URL
        public string url;
    }

    // 動画のフォールバック情報
    [SerializeField] private VideoInfo[] _videos;

    // 起動時に再生するかどうか
    [SerializeField] private bool _playOnAwake = true;

    // ブラウザの動画サポートチェック
#if UNITY_WEBGL && !UNITY_EDITOR
    // WebGLの場合は、JavaScriptの関数を呼び出す
    [DllImport("__Internal")]
    private static extern string CanPlayType(string format);
#else
    // WebGL以外の場合は、再生するまで未確定とする
    private static string CanPlayType(string format)
    {
        return "maybe";
    }
#endif

    private int _currentVideoIndex;

    /// <summary>
    /// フォールバックを考慮して動画を再生する
    /// </summary>
    public void Play()
    {
        if (!enabled) return;

        // リソースをURLに設定
        // VideoClipはWebGLでは使用不可
        _videoPlayer.source = VideoSource.Url;

        // 動画を再生する
        _currentVideoIndex = 0;
        TryPlayVideo();
    }

    private void Awake()
    {
        if (_playOnAwake)
            Play();
    }

    private void OnEnable()
    {
        _videoPlayer.errorReceived += OnErrorReceived;
    }

    private void OnDisable()
    {
        _videoPlayer.errorReceived -= OnErrorReceived;
    }

    // 動画再生を試みる
    private void TryPlayVideo()
    {
        while (_currentVideoIndex < _videos.Length)
        {
            var video = _videos[_currentVideoIndex];

            // ブラウザで再生できるかどうかをチェック
            var canPlayType = CanPlayType(video.format);

            // 再生可能な場合は、VideoPlayerに動画を設定して再生
            if (!string.IsNullOrEmpty(canPlayType))
            {
                _videoPlayer.url = video.url;
                _videoPlayer.Play();
                break;
            }

            // 再生不可の場合は次の候補の動画に移る
            _currentVideoIndex++;
        }
    }

    // VideoPlayerの再生でエラーが発生したときに呼び出される
    private void OnErrorReceived(VideoPlayer source, string message)
    {
        // 2回エラー通知が来ることがあるため、URLが含まれるメッセージだけを通過
        if (!message.Contains(source.url))
            return;

        // 次の動画を再生
        _currentVideoIndex++;
        if (_currentVideoIndex >= _videos.Length)
            return;

        TryPlayVideo();
    }
}

mergeInto(LibraryManager.library, {
  CanPlayType: function(format) {
    var video = document.createElement('video');
    
    if (typeof video.canPlayType === 'function') {
      var result = video.canPlayType(UTF8ToString(format));
      
      var bufferSize = lengthBytesUTF8(result) + 1;
      var buffer = _malloc(bufferSize);
      stringToUTF8(result, buffer, bufferSize);
      return buffer;
    }
    
    return 0;
  }
});

Unityプロジェクトルート
 └─Assets/
      ├─Scripts
      │   └FallbackVideoPlayer.cs
      └─Plugins
          └WebGL
             └CanPlayType.jslib

path/to/server/dir
 ├─WebGLのビルドフォルダ
 └─videos
      ├─video.webm
      └─video.mp4

var video = document.createElement('video');

var result = video.canPlayType(UTF8ToString(format));

var bufferSize = lengthBytesUTF8(result) + 1;
var buffer = _malloc(bufferSize);
stringToUTF8(result, buffer, bufferSize);
return buffer;

    // ブラウザの動画サポートチェック
#if UNITY_WEBGL && !UNITY_EDITOR
    // WebGLの場合は、JavaScriptの関数を呼び出す
    [DllImport("__Internal")]
    private static extern string CanPlayType(string format);
#else
    // WebGL以外の場合は、再生するまで未確定とする
    private static string CanPlayType(string format)
    {
        return "maybe";
    }
#endif

private void OnEnable()
{
    _videoPlayer.errorReceived += OnErrorReceived;
}

private void OnDisable()
{
    _videoPlayer.errorReceived -= OnErrorReceived;
}

// 動画再生を試みる
private void TryPlayVideo()
{
    while (_currentVideoIndex < _videos.Length)
    {
        var video = _videos[_currentVideoIndex];

        // ブラウザで再生できるかどうかをチェック
        var canPlayType = CanPlayType(video.format);

        // 再生可能な場合は、VideoPlayerに動画を設定して再生
        if (!string.IsNullOrEmpty(canPlayType))
        {
            _videoPlayer.url = video.url;
            _videoPlayer.Play();
            break;
        }

        // 再生不可の場合は次の候補の動画に移る
        _currentVideoIndex++;
    }
}

// VideoPlayerの再生でエラーが発生したときに呼び出される
private void OnErrorReceived(VideoPlayer source, string message)
{
    // 2回エラー通知が来ることがあるため、URLが含まれるメッセージだけを通過
    if (!message.Contains(source.url))
        return;

    // 次の動画を再生
    _currentVideoIndex++;
    if (_currentVideoIndex >= _videos.Length)
        return;

    TryPlayVideo();
}

VideoPlayer cannot play url : https://your-domain/video.webm

Cannot read file.