<script>
var captions = []; // empty array to hold the individual captions

// function to populate the 'captions' array with the specified language
function getCaptions(lang) {
captions = []; // empty the captions array
var nodes = document.querySelectorAll('#transcripts span:lang(' + lang + ')'); // use the "lang" CSS pseudo-class to grab all spans in the language's transcript (not headings)
var node = "";
for (var i = 0, len = nodes.length; i < len; i++) { // loop through them
node = nodes[i];
var c = {'start': parseFloat(node.getAttribute('data-begin')), // get start time
'end': parseFloat(node.getAttribute('data-end')), // and end time
'text': node.textContent};
captions.push(c); // and all the captions into an array
}
}

window.onload = function() {
var caption = document.createElement('div'); // JS is enabled, so insert a div to put the captions into
caption.id = 'caption'; // it has an id of caption
var ref = document.getElementsByTagName('video')[0]; // and it's after the first video element
ref.parentNode.insertBefore(caption, ref.nextSibling);
getCaptions('ja');
}

function timeupdate() {
var v = document.querySelector('video');
var now = v.currentTime; // how soon is now?
var text = "", cap = "";
for (var i = 0, len = captions.length; i < len; i++) {
cap = captions[i];
if (now >= cap.start && now <= cap.end) // is now within the times specified for this caption?
{
text = cap.text; // yes? then load it into a variable called text
break;
}
}
document.getElementById('caption').innerHTML = text; // and put contents of text into caption div
}

// hide transcript div when scripting is enabled
document.write('<style>#transcripts{display:none}</style>');
</script>