accessing HTML5 subtitles built into video - html5-video

Question

I wanted write some script to read subtitles in a HTML5 video and provide a different view for them (outside the videoplayer). A sample HTML5 video is here: https://www.youtube.com/watch?v=DNi60fyYjCA.
The subtitles seem to be built into the video though, there are no elements on the page. I thought I might be able to get at these subtitles via the cuechange event, or HTMLVideoElement properties track or textTracks. However I'm getting anything (.track and .textTracks are empty, no cuechange event is fired on the video element).
Is it possible for me to read the subtitles built into the video when using the HTML5 player? I am using chrome in this case, but could use a different browser.
gracias

Answer 1

YouTube displays the Captions/Subtitles a in a span element which is located in the player.
If you want to have a look for yourself look through the document this way:
body -> .body-container -> #page-container -> #page -> #player -> #player-mole-container -> #player-api -> .html5-video-player -> .ytp-player-content -> #caption-window-0 -> .caption-window-transform -> span.captions-text -> "subtitles"
(note from frank:
I put using MutationObserver to monitor the captions, the below code seems to work once captions are enabled (by pressing .ytp-subtitles-button):
// select the target node
var target = document.querySelector('.captions-text');
var video = document.querySelector('video');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
console.log(video.currentTime);
console.log(target.innerText);
});
});
// pass in the target node, as well as the observer options
observer.observe(target, {
attributes: true
});
)