Video DTO not defined with the utilization of a brightcove player

Hey there, just a quick question from a newcomer.. I tried following the example at to extract information about the current video DTO in order to display it on my page. However, when accessing it via JS, the value of the video DTO always turns out to be undefined.

I've set up a custom template using videocloud with custom modules, and both the custom player and test video are playing correctly with the API enabled.

Below is the code snippet that I'm using to read the video DTO (specifically 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);
            }
        }
    };
}());

Upon running the above script, the displayVideoInfo method is triggered.. but unfortunately, the videoDTO variable ends up being 'undefined', preventing the displayInfo from updating with the video information

Any idea what might be causing the 'undefined' value as the result for the videoPlayer.getCurrentVideo method? It's puzzling, considering I'm able to obtain correct values from videoPlayer.getCurrentRendition and all events are firing properly. Any assistance would be greatly appreciated, thank you!

javascriptbrightcove

Answer №1

While troubleshooting my JavaScript code, I discovered that the script itself was not the issue. The problem actually stemmed from the custom fields 'mp4-max-rendition' and 'Taxonomy Node Value' stored in the video. Whenever these fields were set, BrightcoveExperiences.js would start throwing errors. After reaching out to Brightcove for help, they provided me with a workaround that resolved the issue for both videos with and 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);
      });
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combine the promises from multiple Promise.all calls by chaining them together using the array returned from

I've embarked on creating my very own blogging platform using node. The code I currently have in place performs the following tasks: It scans through various folders to read `.md` files, where each folder corresponds to a top-level category. The dat ...

javascriptnode.jspromise

Send only the modified form fields when making an AJAX PUT request to the REST API

I need to update my data using an AJAX request triggered by clicking the Save button on a form with multiple fields. Currently, the update only works when all fields are filled out because I'm passing $('#field').val(). But what if I only wa ...

javascriptjqueryhtmlajax

Sorting an array of subdocuments within a populated query result in Node.js with Mongoose

I am looking to fetch recently submitted articles by members based on time. In the Member Schema, there is an array of _id values for submitted articles. Below are the details of the Member and Article Schemas: Member Schema const mongoose = require( ...

javascriptnode.jsmongodbsortingmongoose-populate

Error: Unable to find the specified "location.ejs" view in the views directory

I am encountering the following error - Error: Failed to find view "location.ejs" in views folder "e:\NodeJs_Project\geolocationProject\views" at Function.render Your help in resolving this issue would be greatly appreciated. server.js ...

javascriptnode.jsexpressejs

There was an error trying to read properties of undefined, specifically the 'prototype', in a code using Next.Js and Express

While attempting to incorporate express into my next.js project, I encountered errors when trying to initialize express: const express = require('express'); The errors that appeared were: Module not found: Can't resolve 'async_hooks ...

javascriptnode.jsexpressnext.js

Is there a way in Reactjs Material UI 5 (MUI5) to unselect only the star that was clicked, without affecting the rest of the stars in the

For instance: I selected the 3rd star on the rating component, but when I click on it again, all the previous stars disappear and it shows 0 stars. How can I make it so that if I click on the 3rd star a second time, only the 3rd star is removed, leaving ...

javascriptreactjsmaterial-ui

What's the purpose of clicking on the page number before accessing the information?

After successfully rendering filtered products, I encountered an issue with implementing pagination. The pagination is functional but requires clicking on a page number before it displays correctly. Even though I have included a loading state, it's no ...

javascriptreactjsmaterial-uimern

Field for Entering Time

I need help creating a form that will only accept time values formatted as HH:MM. Can someone guide me on how to filter user input and display the colon in the text field? I am thinking that I might need a specialized input box for this purpose. ...

javascriptjqueryhtml

Attempting to dynamically fill a dropdown menu based on the values chosen in the two previous selections

Could you please assist in identifying the issue with the code below? I am attempting to populate a select option based on the selections from two previous select options. For instance, after selecting option 1 and then option 2, the third option should be ...

javascriptphpjqueryajaxpdo

Create a dropdown menu using a PDO query to populate the selectable options

I need to create a Select List that dynamically populates items/information from a Query. I understand the importance of updating the select list every time the database is updated, so JQuery is required for this task. Although I have limited experience wi ...

javascriptphpjqueryjsonpdo

Eliminating an SVG component from the webpage with the help of jQuery

Utilizing jQuery to insert an element into an embedded SVG can be achieved with the following code: var rect = SVG('rect'); $(rect).attr( { x: left, y: top, width: right - lef ...

javascriptjqueryhtmlsvg

How can I use the .filter() method in JavaScript to retrieve the last X elements/indices from an array?

I am searching for a method to sift through an array and retrieve the last x number (or most recently added) of elements/indices from that array. While I understand that .pop() may be a possibility, I am uncertain about how to integrate ...

javascriptarraysfilterindices

What is preventing the direct passing of the dispatch function from a useState hook into an onClick handler function?

const Counter = () => { const [count, setCount] = useState(0); // Uncommenting the line below would result in an infinite loop because it directly invokes setCount(count + 1) on render. // This causes the component to continuously re-render and up ...

javascriptreactjsreact-hooksuse-state

Tips for integrating AudioWorklets with vue-cli, webpack, and babel (resolved illegal invocation error)

I'm experiencing some challenges while attempting to develop a WebApp using vue-cli with AudioWorklets. Whenever I try to access properties of my AudioWorkletNode, such as port or channelCount, I encounter multiple errors: TypeError: Illegal invocati ...

javascriptvue.jswebpackbabeljsweb-audio-api

Obtain form data as an object in Vue when passed in as a slot

Currently, I am working on developing a wizard tool that allows users to create their own wizards in the following format: <wiz> <form> <page> <label /> <input /> </page> <page> <label /> ...

javascripttypescriptvue.js

What is the process for importing from vueuse into Vue SFC Playground?

After attempting to integrate vueuse through an Import Map using the code @vueuse/core": "https://www.unpkg.com/@vueuse/core?module, I encountered an issue where reactivity was not functioning as expected in vueuse. The import process appeared t ...

javascriptvue.js

Generate a key pair using the cryto library and then use it with the json

There's a new method called generateKeyPair in node 10, and I am utilizing it in the following way: const { publicKey, privateKey } = crypto.generateKeyPairSync("rsa", { modulusLength: 4096, publicKeyEncoding: { type: "spki", format: "pem ...

javascriptnode.jsjwt

Tips for updating the DOM within a map function by utilizing the onChange event with a checkbox and react hooks

Initially, I imported a basic "database" object from another file that contains an array of students. I then used map to iterate through the student array and display all the students on the window object. Everything was working fine until I attempted to ...

javascriptreactjsreact-hooks

What are the steps to successfully deploy a static website created with Next.js on Vercel?

Using the Next.js static site generator, I created a simple static site that I now want to deploy on Vercel. However, I keep encountering an error during the build process. While I have successfully deployed this site on other static hosting platforms befo ...

javascriptdeploymentnext.jsvercelstatic-site

Organize all ngDialog instances within a factory and access them through a directive

In order to keep the ngDialogs centralized in one place instead of dispersed, I had the idea of creating a factory named modal.js. This factory would contain a list of all the modals with a switch statement. Here is an example: .factory(&ap ...

javascriptangularjs