VideoJS Integration with Storm Streaming Server

VideoJS is a lightweight, open-source video player with excellent flexibility and plugin support. It integrates seamlessly with both the Storm Streaming Cloud platform and the standalone Storm Streaming Server.

Note

This guide is based on Video.js v8+ and assumes usage of the videojs-http-streaming plugin.

Embed Code

Include the required scripts for Video.js and HLS support:

VideoJS scripts

html

<!-- VideoJS Core -->
<script src="https://cdn.jsdelivr.net/npm/video.js@8/dist/video.min.js"></script>

<!-- HLS plugin -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-http-streaming.min.js"></script>

Embed your video player using the following configuration:

VideoJS configuration

html

<video-js id="vid1" width="600" height="300" class="vjs-default-skin" controls>
    <source src="https://{SERVER_HOST}/{APP_NAME}/{STREAM_KEY}.m3u8" type="application/x-mpegURL" />
</video-js>

<script>
    // Replace the following placeholders with actual values
    // {SERVER_HOST}, {APP_NAME}, {STREAM_KEY}
    var player = videojs("vid1");
    player.play();
</script>

Main Parameters Explanation

Parameter	Description
`source: src`	Path to the `.m3u8` file that represents the live stream. It must follow the pattern: `https://{SERVER_HOST}/{APP_NAME}/{STREAM_KEY}.m3u8`

URL Parameters:

Placeholder	Description
`{SERVER_HOST}`	Hostname or IP address of the Storm Streaming Server (vHost with HTTP enabled).
`{APP_NAME}`	The name of the application. Default is `live`.
`{STREAM_KEY}`	Unique stream key associated with the broadcast.

Adaptive Bitrate Streaming (ABR)

To enable Adaptive Bitrate Streaming (ABR), you must configure the transcoding options. In Storm Streaming Cloud, this can be done during stream creation (depending on your subscription). For Storm Streaming Server, a commercial license is required, along with proper transcoder configuration in the application.

Differences Between VideoJS & Storm Player Core/UI

VideoJS and our dedicated Storm Player Core/UI behave differently. VideoJS does not automatically react to stream state changes (e.g., published/unpublished). Developers are responsible for implementing custom logic if needed. VideoJS will also not provide a server with real-time playback details.

Useful Links

Video.js GitHub Repository – https://github.com/videojs/http-streaming

Support Needed?

If you have any questions or need assistance, please create a support ticket and our team will help you.