Quick Start

Configure a video source, choose where to display it, and start playback from the Inspector or from C#.

Configure a player in the Inspector#

1. Add Component → Video → Proper Video Player (WebGL) to a GameObject.
2. Set Source Url to an absolute URL, such as https://media.example.com/intro.mp4. For a file under Assets/StreamingAssets/, enter its relative path and enable Source Is Streaming Assets Path.
3. Assign a RawImage to Output Image if the video should be displayed in a Unity UI. The component binds the video texture and applies the required WebGL vertical flip.
4. Leave Muted enabled when using Play On Start. Browsers commonly block autoplay with audio; enable audio from a click or tap handler. See Autoplay & CORS.
5. Enter Play Mode. The Editor uses Unity's VideoPlayer fallback; a WebGL build uses the native HTML video backend.

Play On Start opens and plays a non-empty configured source from Start(). Disable it when your application will call Open explicitly.

Open a source from code#

using ProperVideoPlayerWebGL;

var player = gameObject.AddComponent<ProperVideoPlayer>();
player.OnOpened.AddListener(() => Debug.Log("The first frame is available."));
player.OnError.AddListener(message => Debug.LogError(message));
player.Open("https://media.example.com/intro.mp4");

Open(url) starts playback after the first frame is available. Use Open(url, playWhenReady: false) to prepare the first source without starting it. When replacing a source for which playback was already requested, call Pause() before opening the replacement with playWhenReady: false. On WebGL, .m3u8 and .mpd URLs are detected as HLS and DASH respectively. See HLS & DASH Streaming for extension-less stream URLs.

A later Open call supersedes an earlier open that is still in progress. Use OnOpened and OnError to update application state when the active request completes.

Prepare a WebGL build#

• Local media: place files in Assets/StreamingAssets/ and use a relative source path. These files are normally served from the same origin as the build.
• Remote media: use HTTPS and configure the media host to permit cross-origin access from the build's origin. This applies to the media file and to every HLS or DASH resource.
• Encoding: H.264/AAC in an MP4 container has broad browser support, but compatibility is not identical across browsers and devices. Test the intended targets and use ProperVideoPlayer.CanPlayType(mimeType) in a WebGL build when capability detection is needed.
• Hosting: serve the WebGL build through HTTP or HTTPS. Do not open the generated index.html directly from the file system.