Attaching & Detaching Player - Storm JS Player Core

Static Player Attachment

In the following example, a portion of the configuration object specifies that the player should be embedded inside an HTML container with the ID container:

Static attachment

javascript

Copy

const streamConfig = {
    stream: {
        ...   // stream settings
    },
    settings: {
        ... // basic settings
        video: {
            containerID: "container",
            width: "1280px",
            height: "720px",
        }
    }
};

Dynamic Player Attachment

The containerID parameter is optional, meaning the player object can be initialized without specifying a container. In this case, playback won't be possible, but you can already subscribe to the target stream.

Later, the player can be dynamically attached to a container using the attachToContainer() method:

Dynamic attachment

javascript

Copy

const streamConfig = {
    stream: {
        ...   // stream settings
    },
    settings: {
        ... // basic settings
        video: {
            width: "100%",
            height: "100%"
        }
    }
};

const storm = stormPlayerCore(streamConfig);
storm.attachToContainer("container");

The attachToContainer() method accepts either:

1. A string representing the ID of an HTML element in the DOM, or
2. A direct reference to a DOM element:

Using DOM element reference

javascript

Copy

const myElement = document.getElementById("container");
storm.attachToContainer(myElement);

The method will return true if the operation succeeds (i.e., the container exists) or false if it fails for any reason.

Removing the Player from the DOM

To remove the player object from the DOM, use the detachFromContainer() method:

Detach from container

javascript

Copy

storm.detachFromContainer();

If the player is removed from the DOM while a stream is playing, playback will stop and the stream will no longer be displayed. This behavior mirrors that of the native <video> element. Once the player is reattached to the DOM, playback will automatically resume by reissuing the play command.

Repositioning the Player in the DOM

If you simply want to change the location of an already initialized player instance within the DOM, you don't need to explicitly call detachFromContainer() followed by attachToContainer(). Instead, you can directly call attachToContainer() again with the new target container. If a stream is currently playing, it will be seamlessly moved to the new container without pausing or reissuing the play request.

Repositioning player

javascript

Copy

const storm = stormPlayerCore(streamConfig);
storm.attachToContainer("firstContainer");

// some code

storm.attachToContainer("nextContainer");