Undefined video DTO using a brightcove player

Question

Well, a newbie question here.. I followed the example in http://docs.brightcove.com/en/video-cloud/smart-player-api/samples/display-tags-custom-fields.html trying to read the current video DTO in order to display that information on my page, but from JS I couldn't get a valid value of the video DTO (it's always undefined for me).

I have created a custom template from the videocloud using custom modules, both the custom player and my test video are being played correctly with the API enabled.

Here is the code I'm using for read the video DTO (refer to the 'BCSmain.displayVideoInfo' method):

    /**** Brightcove Services Module ****/
var BCS = (function() {
    // variables
    var player,
    APIModules,
    videoPlayer,
    adEvent,
    captionsEvent,
    contentEvent,
    cuePointEvent,
    mediaEvent;
    // public functions and data
    return {
        /**** template loaded event handler ****/
        onTemplateLoad : function (experienceID) {
            // get references to the player, API Modules and Events
            player = brightcove.api.getExperience(experienceID);
            APIModules = brightcove.api.modules.APIModules;
            adEvent = brightcove.api.events.AdEvent;
            captionsEvent = brightcove.api.events.CaptionsEvent;
            contentEvent = brightcove.api.events.ContentEvent;
            cuePointEvent = brightcove.api.events.CuePointEvent;
            mediaEvent = brightcove.api.events.MediaEvent;
            BCSmain.bcslog("template loaded");
        },
        /**** template ready event handler ****/
        onTemplateReady : function (evt) {
            BCSmain.bcslog("template is ready");
            // get references to modules
            videoPlayer = player.getModule(APIModules.VIDEO_PLAYER);
            // play current video
            videoPlayer.play();
            // display video information
            videoPlayer.getCurrentVideo(BCSmain.displayVideoInfo);
        }
    };
}());
/**** Brightcove custom modules ****/
var BCSmain = (function() {
    // variables
    // public functions and data
    return {
        /**** display video information ****/
        displayVideoInfo : function (videoDTO) {
            console.log(videoDTO);
            displayInfo.innerHTML += "<h3>About this video</h3>";
            displayInfo.innerHTML += "<p>Title: " + videoDTO.displayName + "</p>";
            displayInfo.innerHTML += "<p>Description: " + videoDTO.shortDescription +"</p>";
            BCSmain.bcslog("video information has been updated");
        },
        /**** logging ****/
        bcslog : function (message) {
            if (window["console"] && console["log"]) {
                var d = new Date();
                console.log(d + ": " + message);
            }
        }
    };
}());

As result of the script above, the displayVideoInfo method is being executed.. and the videoDTO variable ends with an 'undefined' value so the displayInfo is not being updated with the video information

Do you know what could be causing the 'undefined' value as result for the videoPlayer.getCurrentVideo method?. It is strange, since I'm getting correct values from videoPlayer.getCurrentRendition and the events are being fired correctly. Any help will be appreciated, thanks!

Answer 1

I was looking for a problem in my JavaScript source, but seems like the script is ok. The problem was related to the custom fields: 'mp4-max-rendition' and 'Taxonomy Node Value' stored in the video. Whenever I set them, BrightcoveExperiences.js start complaining about them. After report the problem to brightcove they gave me the workaround below which is working fine for videos with or without custom fields.

 function onTemplateLoad(experienceID){
      player = brightcove.api.getExperience(experienceID);
      videoPlayer = player.getModule(brightcove.api.modules.APIModules.VIDEO_PLAYER);
      // set up event listener for mediaChange event
      // NOT templateReady event would be too late for the first video
      videoPlayer.addEventListener(brightcove.api.events.MediaEvent.CHANGE, function(evt){
           // videoDTO object will be in evt.media property
           videoDTO = evt.media;
           console.log("videoDTO", videoDTO);
      });
 }