
Developers
Player
Developers
Player
<script>
tags, also receives automatic updates.flowplayer.cloud
is possible.Using iframe embeds is the most hands-off approach to publishing content with the Platform.
Here is an example of what an iframe embed code might look like:
<div
class="flowplayer-embed-container"
style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width:100%;">
<iframe
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
webkitAllowFullScreen mozallowfullscreen allowfullscreen
src="//ljsp.lwcdn.com/api/video/embed.jsp?id=3afc64ea-fe85-456c-b9d7-6d1de8350ff2&pi=cad9d975-ccae-4757-88a3-a65ebb7419f8"
title="0" byline="0" portrait="0"
width="640" height="360"
frameborder="0"
allow="autoplay">
</iframe>
</div>
This is how you would get your iframe embed code from the Platform:
Easiest way to get started is to use the Embed codes from the platform.
While it's easy to copypaste the codes this comes with some limitations:
Here is what a cloud-hosted js embed code might look like:
<div
data-player-id="cad9d975-ccae-4757-88a3-a65ebb7419f8">
<script src="//cdn.flowplayer.com/players/ed1cc6dd-bf33-4ec1-94e0-669c3180ce75/7/flowplayer.async.js">
{ "src": "3afc64ea-fe85-456c-b9d7-6d1de8350ff2" }
</script>
</div>
This is how you get your the cloud-hosted js embed code from the Platform:
If you need more control you can include the player assets manually in your HTML templates and initialize the player by hand. See instructions below.
This is the advanced way of using the player.
When using the pure javascript api a token
from your dashboard is required.
First you need to include the player assets. There are multiple ways of including the assets. You can choose the suitable one depending on your setup and use case.
If you intend to use platform videos (hosted by us or remote video assets) with the manual Javascript setup, loading the platform integration plugin is mandatory to get analytics data. It is also required to use platform hosted player settings and to configure the hosted poster image automatically.
The player assets also exist on NPM under name @flowplayer/player
To install the latest stable use either yarn or npm to install
yarn add @flowplayer/player
npm install @flowplayer/player
We also publish the canary (bleeding edge) release channel automatically to NPM. To use that you need to use the @next
tag when installing:
yarn add @flowplayer/player@next
When using NPM there's no global flowplayer
exported. You need to import the player:
import flowplayer from @flowplayer/player
flowplayer("#my-selector", myConfiguration)
To use plugins from NPM you need to import them manually and register by hand:
import flowplayer from @flowplayer/player
import MessagePlugin from @flowplayer/player/plugins/message
import SharePlugin from @flowplayer/player/plugins/share
flowplayer(MessagePlugin, SharePlugin) // Plugins are now registered
These are the bare minimum assets for creating most players. There are many more plugins available, but this is designed as a quick-start setup.
<link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
<script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
<!-- Optional plugins -->
<script src="//cdn.flowplayer.com/releases/native/stable/plugins/hls.min.js"></script>
You can download the files from here
Specific versions can be called by version number like https://cdn.flowplayer.com/releases/native/[version]/flowplayer.zip
, for example https://cdn.flowplayer.com/releases/native/v2.5.9/flowplayer.zip
The archive will contain various files called flowplayer.min.js which differ in size and features:
/dist/flowplayer.min.js
and /dist/default/flowplayer.min.js
: the main player with user interface (requires the skin css file to work in an embed), files are identical/dist/core/flowplayer.min.js
: the player API without user interface, useeful for background videos for example/dist/embed/flowplayer.min.js
: the main player with the HLS and platform embed plugins in one fileas well as the individual plugins and the skin css in their respective folders.
<link rel="stylesheet" href="path/to/style/flowplayer.css">
<script src="path/to/flowplayer.min.js"></script>
<!-- Optional plugins -->
<script src="path/to/plugins/hls.min.js"></script>
When using standalone JavaScript player you need to configure the player with your unique token. The token can be created in your dashboard.
The token contains information about player ACL and subscription validity. When creating the token, you have the option to restrict the use of the token to up to two different domains. The token is also validated online on every play. If you cannot have the player calling home you can contact our sales for an OEM license.
The token has to be configured in the player with the token
configuration value.
Create a <div>
element in your HTML to act as the placeholder for the player:
<div id="player_container"></div>
And then finally call the flowplayer()
initializer to kick of the player:
<script>
flowplayer('#player_container', {
src: 'my_video.mp4',
token: '<my_token>'
})
</script>
You can read more about the player api next if you are interested in the pure javascript setup.
Live streaming
Live analytics
Ad scheduling
Monetization