Flow Player Web

This guide is for integrating the MediaMelon Player SDK for the javascript based Flow Player Web

PreviousHTML5 Player Web NextDashJS Player Web

Last updated 1 year ago

Was this helpful?

Flow Player Web

This guide is for integrating the MediaMelon Player SDK for the javascript based Flow Player Web

Step 1: Add the MediaMelonPlayer SDK

Add the following lines to the web page at the starting.

  <script type="text/javascript" src="https://PATH_TO_MEDIAMELON_PLAYER_SDK/mmsmartstreaming_flowjsplayer.min.js"></script>

Step 2: Register and Initialize the MediaMelon Player SDK

<customer_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at

After the player instance has been created, create a new Plugin object, register, report player Info and then initialize the plugin as shown below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlowJS Player</title>

    <link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />

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

<body>
    <div id="player"></div>

    <script>
        var player = flowplayer("#player", {
            token: "eyJraWQiOiJxaEZ6dWR4dmJuTDMiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJxaEZ6dWR4dmJuTDNcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.pdpIEfbRN_6P-ayyNsEazPPPjr0RSmd8SjJyqp8w8BYXTYsg11FjCODutzLZ6jkSm5hHTqfg05cCVuHcFIfI1w"
            , src: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
        })

        var mmVideoAssetInfo = {
            "assetName": "ASSET_NAME",
            "assetId": "ASSET_ID",
            "videoId": "VIDEO_ID",
            "contentType": "CONTENT_TYPE",
            "genre": "GENRE",
            "drmProtection": "DRM_PROTECTION",
            "episodeNumber": "EPISODE_NUMBER",
            "season": "SEASON",
            "seriesTitle": "SERIES_TITLE",
            "videoType": "VIDEO_TYPE",
            "customTags": {
                "key1": "VALUE_STRING1",
                "key2": "VALUE_STRING2"
            }
        };

        //registering to the MediaMelon plugin
        var mmFlowPlugin = new FlowJSMMSSIntgr();
        if (mmFlowPlugin.getRegistrationStatus() === false) {
            mmFlowPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID",
                "SUBSCRIBER_ID",
                "DOMAIN_NAME",
                "SUBSCRIBER_TYPE",
                "SUBSCRIBER_TAG");
            mmFlowPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", 'PLAYER_VERSION');
        }

        let mediaURL = "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
        let isLive = false;    //Set this to true for a live stream or false for a VOD stream
        // If isLive is not set here, it will be handled internally by the SDK.
        
        mmFlowPlugin.initialize(player, mediaURL, mmVideoAssetInfo, isLive);        
    </script>

</body>

</html>

Variable

Description

PLAYER_NAME

String containing the Player Name.

CUSTOMER_ID

String containing your MediaMelon-assigned Customer ID.

SUBSCRIBER_ID

String containing your Subscriber’s ID. If you do not use subscriber IDs, enter null

DOMAIN_NAME

String containing your section of your subscriber or assets. (Optional)

SUBSCRIBER_TYPE

String containing the Subscriber Type (e.g. “Free”, “Paid”). If you do not use subscriber types, enter null

SUBSCRIBER_TAG

String containing an additional subscriber-specific information. This is sent in clear (not hashed) to SmartSight and it is advised to not send sensitive information in this field.

ASSET_ID

String containing Asset Id.

ASSET_NAME

String containing Asset Name.

VIDEO_ID

String containing your video’s ID. If you do not use videos IDs, enter null.

CONTENT_TYPE

String containing type of the Content. For example - "Movie", "Special", "Clip", "Scene Epis Lifts".

GENRE

String containing Genre of the content. For example - "Comedy", "Horror".

DRM_PROTECTION

Widevine, Fairplay, Playready etc. Unknown means content is protected, but protection type is unknown. For clear contents, do not set this field

EPISODE_NUMBER

String containing sequence number of the Episode.

SEASON

String containing the Season. For example - "Season1".

SERIES_TITLE

String containing Title of the Series.

VIDEO_TYPE

String containing Video Type. For example - "LIVE", "VOD".

CUSTOM_TAGS

Extra custom metadata can be added here if required. If extra metadata is not required, enter null.

PLAYER_BRAND

String containing Player Brand.

PLAYER_MODEL

String containing Player Model. For example - This could be a variant of player. Say name of third party player used by organisation. Or any human readable name of the player.

PLAYER_VERSION

String containing Player Version.

PreviousHTML5 Player Web NextDashJS Player Web

Last updated 1 year ago

Was this helpful?

Step 1: Add the MediaMelonPlayer SDK

Add the following lines to the web page at the starting.

  <script type="text/javascript" src="https://PATH_TO_MEDIAMELON_PLAYER_SDK/mmsmartstreaming_flowjsplayer.min.js"></script>

Step 2: Register and Initialize the MediaMelon Player SDK

<customer_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at

After the player instance has been created, create a new Plugin object, register, report player Info and then initialize the plugin as shown below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlowJS Player</title>

    <link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css" />

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

<body>
    <div id="player"></div>

    <script>
        var player = flowplayer("#player", {
            token: "eyJraWQiOiJxaEZ6dWR4dmJuTDMiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJxaEZ6dWR4dmJuTDNcIixcImRvbWFpblwiOltcImZsb3dwbGF5ZXIuY29tXCJdfSIsImlzcyI6IkZsb3dwbGF5ZXIifQ.pdpIEfbRN_6P-ayyNsEazPPPjr0RSmd8SjJyqp8w8BYXTYsg11FjCODutzLZ6jkSm5hHTqfg05cCVuHcFIfI1w"
            , src: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"
        })

        var mmVideoAssetInfo = {
            "assetName": "ASSET_NAME",
            "assetId": "ASSET_ID",
            "videoId": "VIDEO_ID",
            "contentType": "CONTENT_TYPE",
            "genre": "GENRE",
            "drmProtection": "DRM_PROTECTION",
            "episodeNumber": "EPISODE_NUMBER",
            "season": "SEASON",
            "seriesTitle": "SERIES_TITLE",
            "videoType": "VIDEO_TYPE",
            "customTags": {
                "key1": "VALUE_STRING1",
                "key2": "VALUE_STRING2"
            }
        };

        //registering to the MediaMelon plugin
        var mmFlowPlugin = new FlowJSMMSSIntgr();
        if (mmFlowPlugin.getRegistrationStatus() === false) {
            mmFlowPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID",
                "SUBSCRIBER_ID",
                "DOMAIN_NAME",
                "SUBSCRIBER_TYPE",
                "SUBSCRIBER_TAG");
            mmFlowPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", 'PLAYER_VERSION');
        }

        let mediaURL = "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8";
        let isLive = false;    //Set this to true for a live stream or false for a VOD stream
        // If isLive is not set here, it will be handled internally by the SDK.
        
        mmFlowPlugin.initialize(player, mediaURL, mmVideoAssetInfo, isLive);        
    </script>

</body>

</html>

Variable

Description

PLAYER_NAME

String containing the Player Name.

CUSTOMER_ID

String containing your MediaMelon-assigned Customer ID.

SUBSCRIBER_ID

String containing your Subscriber’s ID. If you do not use subscriber IDs, enter null

DOMAIN_NAME

String containing your section of your subscriber or assets. (Optional)

SUBSCRIBER_TYPE

String containing the Subscriber Type (e.g. “Free”, “Paid”). If you do not use subscriber types, enter null

SUBSCRIBER_TAG

String containing an additional subscriber-specific information. This is sent in clear (not hashed) to SmartSight and it is advised to not send sensitive information in this field.

ASSET_ID

String containing Asset Id.

ASSET_NAME

String containing Asset Name.

VIDEO_ID

String containing your video’s ID. If you do not use videos IDs, enter null.

CONTENT_TYPE

String containing type of the Content. For example - "Movie", "Special", "Clip", "Scene Epis Lifts".

GENRE

String containing Genre of the content. For example - "Comedy", "Horror".

DRM_PROTECTION

Widevine, Fairplay, Playready etc. Unknown means content is protected, but protection type is unknown. For clear contents, do not set this field

EPISODE_NUMBER

String containing sequence number of the Episode.

SEASON

String containing the Season. For example - "Season1".

SERIES_TITLE

String containing Title of the Series.

VIDEO_TYPE

String containing Video Type. For example - "LIVE", "VOD".

CUSTOM_TAGS

Extra custom metadata can be added here if required. If extra metadata is not required, enter null.

PLAYER_BRAND

String containing Player Brand.

PLAYER_MODEL

String containing Player Model. For example - This could be a variant of player. Say name of third party player used by organisation. Or any human readable name of the player.

PLAYER_VERSION

String containing Player Version.