This guide aims to explain the differences and similarities of the old Flowplayer 7 and our current offering Flowplayer Native. As the native (hence the player name) html5 APIs evolved, we were able to remove lots of custom code and use those APIs instead, resulting in a much smaller player size and far broader compatibility with current devices and browsers.
The guide is meant as a first stop for orientation, we highly recommend reading the whole player developer documentation to exploit the full potential of Flowplayer Native.
This guide is work in progress and we might add bits and pieces while we enhance thje main documentation as well.
Flowplayer Native is continuously developed and updated and there is no more need (though you can still do it) to use a specific version url or to download and install packages. You just reference the stable (or for testing canary) release channel and are set. See the release channel info for details. Plugins are released in the same semver path as the core release, even though internal numbers might differ.
Flowplayer Native does not offer a plain
<video> tag embed, instead you can use one of two methods:
To protect from unwanted usage, you can domain-lock tokens and async players.
For details on the async players with platform-hosted or self-hosted content, follow the embedding documentation.
The configuration structure syntax is similar to Flowplayer 7 but offers different options which are explained in the player documentation. Plugins have their own config sets which live under the respective plugin namespace in the configuration root. Please refer to the plugin documentation pages for the available options. Please note the inline configuration JSON format.
[to be done: list of deprecated options, new options]
Video sources can be configured in the
src: object, which replaces the
clip: configuration object of FP7. Please see the video source documentation for details.
Flowplayer supports playback of the following video source types:
Flash video is no longer supported, hence
flvcannot be used either.
mediaid is a special
src: option where you can use the Flowplayer platform media ids (for video/audio clips, livestreams and playlists) using the platform integration plugin (optionally with a hosted player configuration id), the video source urls and metadata will be retrieved from our platform and automatically merged into the configuration.
MP4 refers to MPEG-4 part 10 video (h264) in an MP4 container. MPEG-4 part 2 (h263) is not supported in many browsers.
WebM (VP8/VP9) is not supported in all browsers. Please check the Caniuse site for a support matrix.
Airplay and Chromecast features are now separate plugins: Airplay and Chromecast.
Cuepoints is now a separate plugin: Cuepoints.
The Playlist feature is now a separate plugin which is initialized in a custom way. To show external controls, you can define a container name of your choice instead of the
.fp-playlist class. See the playlist plugin documentation for details.
Keyboard control is now a separate plugin: Keyboard. Please check the Accessibility guide as well.
The Share feature is now a separate plugin: Share .
Subtitles are now handled by separate plugins: Subtitles and HTML Subtitles. The first one uses the native browser subtitle implementation while
subtitles-html is stylable.
Audio selection and manual quality selection are now separate plugins, please check the Asel and Qsel docs.
The skinning options and modifier classes were completely revamped, check the skinning documentation for the details.
The player text strings are translatable. Please read the translation guide .
Below is a map of old Flowplayer 7 vs. current Flowplayer Native plugins. This covers the plugins which were available for FP7, please note we added several new feature plugins like DRM, Frame Accurate Seeking, Float On Scroll, Gemius Analytics, Comscore Analytics, Message to the ever-growing list.
The Flowplayer Native API is very different from the FP7 API as it mainly extends the standard Element, HTMLMediaElement and HTMLVideoElement object APIs with it's own set of properties and methods. Please read the API docs for details; as you can see the official standards are used where possible.
new FP Native Events, registered under the
Also check out our showcase demos, developer demos and the advanced demos Github repository.