FlowPlayer integration with Storm Streaming Cloud

FlowPlayer is the second most popular web video player with a very extensive plugin system. This player can be easily integrated with the Storm Streaming Cloud service or an instance of the Storm Streaming Server.

Embed code

For Flowplayer, it is necessary to download the HLS plugin. The files are available in the creator's CDN, but they can also be locally embedded on a given website.

FlowPlayer Scripts

html

<script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
<script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/hls.min.js"></script>

Sample config:

FlowPlayer Configuration

html

<div id="container"></div>
<script>
  var player = flowplayer('#container',
    { src: '//${SERVER_HOST}/${APP_NAME}/${STREAM_KEY}.m3u8,
      hls : { native: true },
      token: 'your player token'
    })
</script>

Main parameters explanation

Parameter	Description
`src`	Path to m3u8 file related to the stream. See format below.

URL Format:

//${SERVER_HOST}/${APP_NAME}/${STREAM_KEY}.m3u8

Where:

Variable	Description
`${SERVER_HOST}`	Hostname for the Storm Cloud. Can be found on the Video Summary page.
`${APP_NAME}`	Application name. For the Storm Cloud it's always "live".
`${STREAM_KEY}`	Stream key for the video. For Storm Cloud, it can be found on the Video Summary page.

Push stream example (Cloud Stream data)

Example (Cloud Stream data):

Field	Value
Cloud URL	`rtmp://edge.stormstreaming.com/live`
Stream Key	`6530cdd463abad1bc9ab78bbfb728aaa52b8e779`

Turns into:

//edge.stormstreaming.com/live/6530cdd463abad1bc9ab78bbfb728aaa52b8e779.m3u8

Adaptive Bitrate Streaming (ABR)

In order to utilize the Adaptive Bitrate Streaming (ABR) functionality, it is essential to enable and customize the transcoding setting. In the instance of Storm Streaming Cloud, users have the ability to choose this option during stream creation (provided their subscription permits it).

Differences Between FlowPlayer & Storm Player Core/UI

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

Useful links

Flowplayer HLS Documentation - https://docs.flowplayer.com/plugins/hls

Support Needed?

Create a free ticket and our support team will provide you necessary assistance.