Waiting Room - Storm JavaScript Player
One of the interesting features of Storm Player is the ability to set up a so-called "waiting room", which will count down to the designated start of a video broadcast. For this purpose, appropriately configured parameters should be provided in the StormPlayer configuration object. Here is a simple example:
Preview
Complete Code Example
const playerConfig = {
containerID: "container",
width: "100%",
aspectRatio: "16:9",
waitingRoom: {
createTime: "0000-00-00 00:00:00",
startTime: "0000-00-00 00:00:00",
timeZone: "UTC",
posterURL: "https://mydomain.com/pictures/poster.png",
}
};
Explanation and description of individual fields
| Parameter name | Parameter type | Required | Default | Description |
|---|---|---|---|---|
| waitingRoom:createTime | string | yes | - | This parameter defines the moment of creating a given stream (its announcement). The date format should be YYYY-MM-DD HH:MM:SS. |
| waitingRoom:startTime | string | yes | - | The exact date when the broadcast will start, relative to the user's time zone, should be in the format YYYY-MM-DD HH:MM:SS. |
| waitingRoom:timeZone | string | yes | UTC | Please check https://www.w3schools.com/php/php_ref_timezones.asp for reference. |
| waitingRoom:posterURL | string | no | - | A URL to the poster image that will be displayed in the background of the Waiting Room. |
Table 1. explanation and description of individual fields table
What you should pay attention to:
- The dates provided here are dependent on the time zone of the end user. When displaying a subpage and embedding the player code, this should be taken into account.
- When the "waiting room" timer ends, the player will automatically switch to "live" mode. If the stream is not active - a message about the lack of a stream will appear. We recommend starting the actual broadcast earlier to avoid this effect - you can put an information card at the encoder level, indicating that the stream will start soon.
- It is possible to set your own colors for the "waiting room", more information can be found in Interface & Styling section.