How to run Videos In-Game on Web?

Pre-implementation good-to-know:

Always use MP4 as the video format, as other file formats (such as WebM, MKV, AVI) fail to load in some browsers (notably Safari on Apple devices).
Videos cannot be played directly from the project files on the web. Instead, they must be played from a CDN file URL.
Files in /[BuildOutputFolder]/StreamingAssets/ are always automatically uploaded to Pley and are accessible by URL. Alternatively, you can use your own CDN without issues.

How to run videos during gameplay?

When a video is being called to Pley, use conditional compiling to create web-specific behavior.
Get the CDN URL for the video file you want to play.
Set the video player source to that URL.
Play the video as normal.

//Play video
public void PlayVideo()
	{
        StopVideo();
#if UNITY_WEBGL && !UNITY_EDITOR
        var webVideoPath = GetPleyUrl();
        SetVideoSource(webVideoPath);
#else
        SetVideoSource(videoClip);
#endif
        videoPlayingRoutine = StartCoroutine(PlayVideoRoutine());
	}

//If not using your own CDN, get the file URL from StreamingAssets.
//Pley.Filekit gets files from Pley's CDN, which always hosts StreamingAssets.
private string GetPleyUrl()
    {
        var fileName = Path.GetFileName(videoClip.originalPath);
        var path = Path.Combine("StreamingAssets", "Videos", fileName); 
  			//note: Do not use Application.streamingAssetsPath
        var remotePath = Pley.FileKit.GetFileURL(path);
        return remotePath;
    }

How to add videos to StreamingAssets?

If you are using your own CDN, no action is required here. Use the implementation above with the file URL in your CDN.

If you do not have a CDN, you must either:

(1) Manually add the video file to /[BuildOutputFolder]/StreamingAssets/
(2) Programmatically add the video after a build has been made (during post-processing).

Pley recommends automating the process.

Example scripts to add videos during build post-processing

Triggers after a build completes, and if the target platform is WebGL.
Finds all VideoClip assets in the project.
Adds all videos to StreamingAssets/Videos/
All files in /StreamingAssets/ are uploaded to Pley's CDN.

using System.IO;
using UnityEditor;
using UnityEditor.Build;
using UnityEditor.Build.Reporting;
using UnityEngine;
using UnityEngine.Video;

namespace Editor
{
    public class PleyVideoPostBuildProcessor : IPostprocessBuildWithReport
    {
        public int callbackOrder => 1000;
        
        public void OnPostprocessBuild(BuildReport report)
        {
            if(report.summary.platform != BuildTarget.WebGL)
                return;
            
            var guids = AssetDatabase.FindAssets("t:VideoClip");

            foreach (var guid in guids)
            {
                var path = AssetDatabase.GUIDToAssetPath(guid);
                var videoData = AssetDatabase.LoadAssetAtPath<VideoClip>(path);
                var videoFilePath = AssetDatabase.GetAssetPath(videoData);
                var destinationDir = Path.Combine(report.summary.outputPath, "StreamingAssets", "Videos");
                
                if (!Directory.Exists(destinationDir))
                    Directory.CreateDirectory(destinationDir);
                
                var destinationFilePath = Path.Combine(destinationDir, Path.GetFileName(videoFilePath));

                if (File.Exists(destinationFilePath)) 
                    continue;
                
                File.Copy(videoFilePath, destinationFilePath);
                Debug.Log($"Copied video file from {videoFilePath} to {destinationFilePath}");
            }
        }
    }
}

How to run videos during gameplay?

How to add videos to StreamingAssets?

Example scripts to add videos during build post-processing

In-Game Video Demo