v3.0 Migration Guide

Migrating Flowplayer Native from version 2.x to 3.0 should be pretty straightforward, but in a few places v3 is not backwards compatible: release URLs, DOM handling, playlist initialization, the plugin signature, cuepoints, flowplayer.util, multiplay and the subtitles plugins. Learn more about those changes below.

Namespaced releases

Instead of the old flat release channel structure (ie: cdn.flowplayer.com/releases/native/3/stable) we now prefix all release channels with the major version.

The new URLS have following structure: [CDN_BASE]/releases/native/[MAJOR_VERSION]/[RELEASE_CHANNEL].

For instance the stable release channel for 3.0 uses URLs like https://cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js.

Internal DOM Handling

In v2.x we used an internal tool called MiniQuery to offer an API for DOM handling. It enhanced all flowplayer-owned DOM elements with methods like toggleClass(), css() etc. We never documented these but there is an off chance you might have been using those methods anyway.

We do not decorate the elements anymore so if you were using any custom methods on the flowplayer-owned elements you need to convert to standard methods.

Old way:

const player = flowplayer("#player", opts)

player.root.toggleClass("my-custom-class")

New way:

const player = flowplayer("#player", opts)

player.root.classList.toggle("my-custom-class")

Playlist initialisation

The playlist plugin is now a Loader plugin. It means that it will handle sources that are defined with type: "flowplayer/playlist".

We have removed the flowplayer.playlist() initialization method in favor of the new way of initializing the player with a playlist.

Note the configuration of the playlist behavior is now set in the playlist namespace and not in the root configuration, hence it will look like in the New playlist syntax example

Look at the examples below on what you need to change:

Old playlist syntax

flowplayer.playlist("#player", {
    playlist: [source1, source2],
    advance: true
})

New playlist syntax

flowplayer("#player", {
    src: {
        type: "flowplayer/playlist",
        items: [source1, source2]
    },
    playlist: {
        advance: true,
        loop: true,
        skip_controls: false,
        delay: 0
    }
})

New plugin/extension signature

Instead of using flat functions as plugins you now need to pass an instance with the following signature:

{
    init: (config: Config, container: HTMLDivElement, player: Player) => void
}

Old syntax

flowplayer(function(config, root, player) {
    player.on(flowplayer.events.PLAYING, () => {
        console.log("playing")
    })
})

New syntax

class MyPlugin {
    init(config, root, player) {
        player.on(flowplayer.events.PLAYING, () => {
            console.log("playing")
        })
    }
}

flowplayer(MyPlugin)

Cuepoints

The cuepoints plugin had several changes:

• draw_cuepoints was deprecated as the visible cuepoint in the timeline did not really serve a purpose. we recommend to use chapters instead if you need to interact with the timeline.
• the start and end properties are now called startTime and endTime.

Compatibility layer

Since version v3.4.3 there is a compatibility layer you can use to migrate to v3 and keep using your 2.x style plugins. This compatibility layer will be removed in v4.

To use the compatibility layer you need to include flowplayer.min.js from the compat/ directory/path.

Example:

<!-- Note the different path -->
<script src="//cdn.flowplayer.com/releases/native/3/stable/compat/flowplayer.min.js"></script>
<script>
flowplayer(function(config, root, player) {
    console.log("Hello from 2.x style plugin")
})
</script>

flowplayer.util removal

With access to modern ECMAScript and utility functions like Object.assign there is no need to write our own utility functions anymore. This is also why we removed the flowplayer.util namespace completely.

If you are using anything from flowplayer.util you need to convert those parts of your code to use browser built-in features.

Old syntax

flowplayer.util.extend(someObject, { newProperty: "value" })

New syntax

Object.assign(someObject, { newProperty: "value" })

Multiplay functionality

Flowplayer 2.x by default didn't allow multiple video players on same page to play simultaneously. You had the chance to override this behavior by configuring multiplay: true. In 3.0 this default was reversed. Multiplay is now allowed by default and can be disabled by multiplay: false.

Preserving old behavior

flowplayer("#container", {
    src: "...",
    multiplay: false
})

Subtitles plugins

Flowplayer 2.x had two subtitles plugins:

• subtitles
• subtitles-html

In 3.0 we replaced the subtitles plugin with the subtitles-html plugin.

If you were using the subtitles-html plugin you now need to update your references to use subtitles instead. This also might affect some customizations you might have done to the appearance.