# VideoJS Web with Google DAI

### **Step 1: Add** the MediaMelon Player SDK <a href="#step-1-add-mediamelon-smartstreaming-sdk-hardbreak" id="step-1-add-mediamelon-smartstreaming-sdk-hardbreak"></a>

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

```javascript
<script type="text/javascript" src="https://PATH_TO_SMARTSTREAMING_SDK"></script>
```

### **Step 2: Register and Initialize** the MediaMelon Player SDK <a href="#step-2-register-and-initialize-mediamelon-sdk" id="step-2-register-and-initialize-mediamelon-sdk"></a>

{% hint style="info" %}
\<customer\_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at [support@mediamelon.com](http://40mediamelon.com/)
{% endhint %}

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&#x20;

Step 2.4 Provide additional player information

Step 2.5 initialize Video JS IMA Plugin

These steps have been annotated in the code below

```javascript
<!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>


```
