How to capture ChaptersButton selection event in Video.js?

Question

I am using a .webVTT file in a video.js project to provide cuepoint access ('chapters' per the image below). I've searched endlessly through the rather terse video.js docs and on the web but I have been unable to find any code examples showing how to capture the selection event when the user selects a cue.

I've tried every variation I can think of for adding an event handler to the various components which make up the ChaptersButton component without success. Can someone point out what I am doing wrong here? I need to get the selected cue times in order to display some other stuff.

player.controlBar.chaptersButton.on('tap', onMenuSelection)
player.controlBar.chaptersButton.on('click', onMenuSelection)
player.controlBar.chaptersButton.menu.on('tap', onMenuSelection)
player.controlBar.chaptersButton.menu.on('click', onMenuSelection)


player.controlBar.chaptersButton.on('select', onMenuSelection)
player.controlBar.chaptersButton.handleClick('click', onMenuSelection)
player.controlBar.chaptersButton.handleClick(onMenuSelection)

Answer 1

You can listen to a click on each of the menu items

player.controlBar.chaptersButton.menu.children().forEach(c => c.on('click', handler))