search

VideoJS Web with Google DAI

hashtag
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>

hashtag
Step 2: Register and Initialize the MediaMelon Player SDK

circle-info

<customer_id> is your MediaMelon-assigned Customer ID. If you do not know your Customer ID contact MediaMelon at [email protected]arrow-up-right

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/[email protected]/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>

Last updated