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.

Complete Code Example

Waiting room configuration

javascript

const playerConfig = {
  containerID: "container",
  width: "100%",
  aspectRatio: "16:9",
  title: "Upcoming Live Stream",
  subtitle: "Starting soon!",
  /*
   * The waitingRoom object is optional and can be added to configure
   * a pre-stream waiting screen with a poster and scheduled start time.
   */
  waitingRoom: {
    createTime: "2025-01-15 10:00:00",
    startTime: "2025-01-20 18:00:00",
    timeZone: "UTC",
    posterURL: "https://mydomain.com/pictures/poster.png",
  }
};

/**
 * Each player instance must be provided with both player (gui) and library configs
 */
const player = stormPlayer(playerConfig, streamConfig);

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	The time zone for the dates. Please check PHP Timezones Reference for available values.
`waitingRoom:posterURL`	string	no	-	A URL to the poster image that will be displayed in the background of the Waiting Room.

Important Notes

Time Zone Considerations - 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.
Auto-Switch to Live Mode - 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.
Custom Styling - It is possible to set your own colors for the "waiting room". More information can be found in the Interface & Styling section.

Next Step

For the next step please check our Storm JS Player - Interface & Styling guide where you'll learn how to customize your player.