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