Your own loading video

Open the demo: e3ds.github.io/E3DS-Iframe-Demo/loading-video.

1. Your video plays at once, muted, because browsers only start a video by themselves when it is muted. Click the video, or Sound on, to hear it.
2. The stream loads underneath. The line at the bottom left says what is happening: waiting for a free machine, preparing the app. The video keeps looping meanwhile.
3. The stream is ready: a Start button appears at the bottom right.
4. Press Start and the video makes way for the stream. If the viewer does not press it, the video hands over by itself when it reaches its end.

The whole example is one file with no framework and no build step: loading-video/index.html. Copy it, then change the two lines at the top of its script:

const VIDEO_URL  = "your-video.mp4";
const STREAM_URL = "https://connector.eagle3dstreaming.com/v5/<your-username>/<your-app>/<your-configuration>";

Use an MP4 (H.264) video: it plays in every browser. Keep it short - it loops until the stream is ready - and small, so it starts before the stream does.

The stream's iframe tells your page how far it has got, with postMessage. The example listens for two of those messages:

Every other moment you can react to - queued, machine found, app downloading, session ended - is listed on Your own loading and ending screens.