Plyr Player Web with MediaMelon Analytics
This guide is for integrating the MediaMelon Player SDK for the javascript based Plyr Web player.
Step 1: Add the MediaMelon Player SDK
Include the following line to the web page at the start
<script type="text/javascript" src="https://PATH_TO_SMARTSTREAMING_SDK"></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">
<body>
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/demo.css">
<script src="./mmsmartstreaming_plyrjsplayer.min.js"></script>
<div class="grid">
<main>
<div id="container">
<video controls crossorigin playsinline id="player">
<source
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
type="video/mp4"
size="720"
/>
</video>
</div>
</main>
</div>
<script>
var mmPlyrPlugin = new PlyrJSMMSSIntgr();
const player = new Plyr('#player');
var mmVideoAssetInfo = {
"assetName": "ASSET_NAME11",
"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"
}
};
let isLive = false;
let streamURL = "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4";
if (mmPlyrPlugin.getRegistrationStatus() === false) {
mmPlyrPlugin.registerMMSmartStreaming("PLAYER_NAME", "CUSTOMER_ID", "SUBSCRIBER_ID", "DOMAIN_NAME", "SUBSCRIBER_TYPE11", "SUBSCRIBER_TAG1234");
mmPlyrPlugin.reportPlayerInfo("PLAYER_BRAND", "PLAYER_MODEL", 'PLAYER_VERSION');
mmPlyrPlugin.reportAppInfo("APP_NAME", "APP_VERSION");
mmPlyrPlugin.setDeviceInfo("DEVICE_MARKETING_NAME");
mmPlyrPlugin.reportVideoQuality("VIDEO_QUALITY");
mmPlyrPlugin.reportDeviceId("DEVICE_ID");
mmPlyrPlugin.initialize(player, streamURL, 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
Was this helpful?