MediaMelon
  • MediaMelon SDK Integration
  • MediaMelon SDK Events
  • MediaMelon Player SDK Integration
    • React Native
      • React Native Video v5.2.0 with Mediamelon SDK
      • React Native Video v6.4.2 with Mediamelon SDK
    • Web SDK
      • VideoJS Web with Mediamelon Analytics
      • VideoJS Web with Google DAI
      • Shaka Player Web v4
      • MediaMelon Web Kaltura Player Plugin Integration Document
      • NexPlayer Web v4
      • THEOPlayer Web
      • JWPlayer Web
      • Radiant Player Web
      • ChromeCast Player
      • HLSJS Player Web
      • HbbTV SDK
      • Comcast PDK 6
      • Bitmovin Web Player
      • HTML5 Player Web
      • Flow Player Web
      • DashJS Player Web
      • Castlabs Player Web
      • Cordova Plugin Toast (Smart TV)
      • Custom Player Web SDK
      • Plyr Player Web with MediaMelon Analytics
      • React Player SDK with IMA
    • Android SDK
      • App Analytics SDK
      • Bitmovin Android v3.73 with Content Provider Metrics
      • Exoplayer v2.13.2 integration with MediaMelon SDK
      • Exoplayer v2.17.1 with Mediamelon SDK
      • Exoplayer v2.12.2 integration with MediaMelon SDK
      • EXOPlayer-Android(V2.14.2) MediaMelon SDK with Google IMA DAI
      • EXOPlayer-Android(V2.17.1) MediaMelon SDK with Google IMA DAI
      • Exoplayer v2.11
      • Exoplayer v2.18.1 with Mediamelon SDK
      • Theoplayer v6.0.0 with Mediamelon SDK
      • Theoplayer v4.12.6 with Mediamelon SDK
      • Theoplayer v7.5.0 with Mediamelon SDK
      • Exoplayer v2.13.3 integration with MediaMelon SDK
      • Kaltura Android Player Integration with Mediamelon SDK
      • Media3 v1.3.0 and ExoPlayer 2.19.1 with MediaMelon SDK
      • Media3 v1.3.1 with MediaMelon SDK
      • MediaMelon Android Media3 v1.1.1 SDK Integration Document
      • Media3Player-Android(V1.3.0) MediaMelon SDK with Google IMA
    • Roku SDK
      • Roku SDK
      • Roku with RAF SDK
      • Roku with IMA SDK
    • iOS SDK
      • AVPlayer (Cocoapods)
      • AVPlayer with Google DAI SDK ( Framework )
      • AVPlayer Quality Of Experience SDK
      • AVPlayer Generic Framework
      • AVPlayer with Google DAI (Cocoapods)
      • Bitmovin iOS v3.44 with Content Provider Metrics
      • THEOPlayer XCFramework
      • THEOplayer (Cocoapods)
      • MediaMelon iOS Kaltura Player Plugin Integration Document
    • tvOS SDK
      • AVPlayer tvOS XCFramework
      • THEOPlayer tvOS XCFramework
    • Toast SDK
    • Custom Player C++ SDK
    • C++ SDK QoE Ads
    • Ad Integrations
      • Google IMA
      • FreeWheel
      • ServerSide.AI
  • SmartSight Analytics
    • Product Features
    • QBR Streaming
  • SmartSight API's
    • API Overview
      • Metric and Dimensions Dictionary
      • General Guidelines
      • Video Experience
      • Ad Experience
      • Smartquery Insights
      • Errors
      • Alerts
    • Use-case dictionary
Powered by GitBook
On this page
  • Step 1: Add the MediaMelon Player SDK
  • Step 2: Register and Initialize the MediaMelon Player SDK

Was this helpful?

  1. MediaMelon Player SDK Integration
  2. Web SDK

VideoJS Web with Google DAI

PreviousVideoJS Web with Mediamelon AnalyticsNextShaka Player Web v4

Last updated 7 months ago

Was this helpful?

Step 1: Add the MediaMelon Player SDK

Include the following lines to the web page after all video js player and Google IMA SDK files are loaded.

<script type="text/javascript" src="https://PATH_TO_SMARTSTREAMING_SDK"></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

We integrate the Media Melon SDK in 5 easy steps

Step 2.1 Specify asset information for MM SDK

Step 2.2 Create Video JS Plugin Object

Step 2.3 Register SDK with Mediamelon data platform

Step 2.4 Provide additional player information

Step 2.5 initialize Video JS IMA Plugin

These steps have been annotated in the code below

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>VIDEO JS IMA</title>

<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
  <h1>Video.js IMA Example Embed</h1>

 <video id="my_video_1" muted="muted" class="vjs-default-skin" controls preload="auto" width="640" height="268"></video>
 <script src="https://unpkg.com/video.js/dist/video.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls.js@3.2.0/dist/videojs-contrib-hlsjs.min.js"></script> 
 <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
 
 <script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script>
 <script src="mmsmartstreamingsdk_videojs_ima.min.js"></script>
  
 <script>
    var player = videojs('my_video_1');
    var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

    // Live stream asset key.
    var TEST_ASSET_KEY = "c-rArva4ShKVIAkNfy6HUQ";

    // VOD content source and video IDs.
    var TEST_CONTENT_SOURCE_ID = "2528370";
    var TEST_VIDEO_ID = "tears-of-steel";
    var videoElement;
    var adUiElement;
    var isAdBreak;
    var streamManager;

    function initPlayer() 
    { 
        videoElement = document.querySelector('video');
        streamManager = new google.ima.dai.api.StreamManager(videoElement);
        streamManager.addEventListener(
                [google.ima.dai.api.StreamEvent.Type.LOADED,
                google.ima.dai.api.StreamEvent.Type.ERROR,
                google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
                google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
                onStreamEvent,
                false);

 
            // Use requestLiveStream(TEST_ASSET_KEY, null) for Live Stream
            requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
    }

    function requestVODStream(cmsId, videoId, apiKey) {
      var streamRequest = new google.ima.dai.api.VODStreamRequest();
      streamRequest.contentSourceId = cmsId;
      streamRequest.videoId = videoId;
      streamRequest.apiKey = apiKey;
      streamManager.requestStream(streamRequest);
    }

    function requestLiveStream(assetKey, apiKey) {
      var streamRequest = new google.ima.dai.api.LiveStreamRequest();
      streamRequest.assetKey = assetKey;
      streamRequest.apiKey = apiKey;
      streamManager.requestStream(streamRequest);
    }
    function onStreamEvent(e) {
        switch (e.type) {
          case google.ima.dai.api.StreamEvent.Type.LOADED:
            console.log('Stream loaded');
            player.textTracks().on('addtrack', function (e) {
            // find out if the new track is metadata
            var track = e.track;
            if (track.kind === 'metadata') {

              // a cuechange event fires when the player crosses over an ID3 tag
              track.on('cuechange', function () {
                let elemTrack = track.activeCues[0];

                if (elemTrack && elemTrack.value.data) {

                  var metadata = {};

                  metadata[elemTrack.value.key] = elemTrack.value.data;
                  metadata["duration"] = Infinity;
                  streamManager.onTimedMetadata(metadata);
                }

              });
            }
            });
            loadUrl(e.getStreamData().url);
            break;

          case google.ima.dai.api.StreamEvent.Type.ERROR:
            console.log('Error loading stream, playing backup stream.' + e);
            loadUrl(BACKUP_STREAM);
            break;

          case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
            console.log('Ad Break Started FROM Customer');
            isAdBreak = true;
            break;

          case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
            console.log('Ad Break Ended FROM Customer');
            isAdBreak = false;
            break;

          default:
            break;
        }
      }
  
    
    var options = {};
    
    //Step 2.1 Specify asset information for MM SDK
    var mmVideoAssetInfo = {
      "assetName":"Lucifer",
                    "assetId": "Lucifer-Netflix",
                    "videoId": "Lucifer-Netflix_India",
                    "contentType": "Comedy/Horror",
                    "genre" : "Comedy",
                    "title" : "Lucifer-Series",
                    "drmProtection": "none",
                    "episodeNumber": "799",
                    "season":"2",
                    "seriesTitle": "Lucifer-On-Earth",
                    "videoType" : "LIVE",
                    "customTags":{
                        "Key1": "Value1",
                        "Key2": "Value2"
                    }
             };
             
    // Initialize Player for Google DAI         
     initPlayer();
    //Step 2.2 Create MM Video JS Plugin  Object
    var mmvjs7Plugin = new VideoJSMMSSIntgr();
    //Step 2.3 Register SDK with Mediamelon data platform 
    if (mmvjs7Plugin.getRegistrationStatus() === false) {
        mmvjs7Plugin.registerMMSmartStreaming("Video JS IMA Player", "CUSTOMER_ID",
                                                "SAMPLE_SUBSCRIBER_ID",
                                                "SAMPLE_DOMAIN_NAME", 
                                                "SAMPLE_SUBSCRIBER_TYPE",
                                                "SAMPLE_SUBSCRIBER_TAG");
        //Step 2.4 Provide additional player information                                        
        mmvjs7Plugin.reportPlayerInfo("videojs-vhs", "vhs", '7');
    }
    function loadUrl(url) { 
      console.log('Loading:' + url);

        player.src({
        src : url,
        type: 'application/x-mpegURL',
        mmVideoAssetInfo: mmVideoAssetInfo
      });
      
       //Step 2.5 initialize Video JS IMA Plugin
        mmvjs7Plugin.initialize(player,url, mmVideoAssetInfo,streamManager);     
        player.play();
    }

  </script>
  
</body>
</html>

support@mediamelon.com