I feel this is a silly question so I apologize, but I have very little experience with JavaScripting in general.
I have an application where I want to allow users to annotate (mark) a video, so I am using https://github.com/spchuang/videojs-markers as a plugin to videojs, and it looks exactly what I need.
But after allowing the user to add markers, I want to record them on my database, so I need to be able to get the raw markers structure (i.e. with the time and text for each mark).
The code below shows what I have. It is the recordMarks
function that I am having trouble with. That is where I want to get the marks in order for me to post them on my database via Ajax
//load the marker plugin
myPlayer.markers({
...
markers: [
]
});
function markTime() {
currentTime = getTime('Mark');
myPlayer.markers.add([{
time: currentTime,
text: currentTime,
overlayText: 'Tag',
class: 'special-blue'
}]);
console.log('marked: ' + currentTime)
}
function recordMarks() {
console.log(myPlayer.markers.markers); // shows as Undefined
// Try another way
for(var i =0; i < myPlayer.markers.length; i++){
console.log('mark ' + i + ' is ' + myPlayer.markers[i].text);
}
}
Given the lack of solutions, I ended up declaring a global array of markers, such that every time I add the marker, I add it both to the global array, and to the player.