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
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.
Last updated