webvtt をcanvas に埋め込むあたり、jQuery が微妙にまざってるのは気にしないでください

jimaku_capture.js

// copyFlame を呼ぶと video#player のフレームにそれに対応する時刻の字幕が埋め込まれた canvas cEle ができるデモ
var _copyFrame = function (jimakuText) {
    var cEle = document.createElement('canvas');
    var vEle = document.getElementById('player'); // video element

    cEle.width  = vEle.videoWidth;
    cEle.height = vEle.videoHeight;

    var bottom = cEle.height - 30;
    var width = cEle.width;
    var lineHeight = 52;
    var fontSize = 40;

    var cCtx = cEle.getContext('2d');
    cCtx.drawImage(vEle, 0, 0);

    if (jimakuText) {
        cCtx.font = 'normal '+fontSize+'px Arial';
        cCtx.fillStyle = '#fff';
        cCtx.textAlign = 'center';
        cCtx.textBaseline = 'bottom';

        var row_i = 0;
        jimakuText.split("\n").reverse().forEach(function (text) {
            var rowMiddle = parseInt(width/2);
            var rowBottom = parseInt(bottom - row_i * lineHeight);

            var metrics = cCtx.measureText(text);
            cCtx.fillStyle = 'rgba(0, 0, 0, 0.6)';
            cCtx.fillRect(
                parseInt((width - metrics.width)/2),
                rowBottom - fontSize - 4, // 微妙に余白がたりないのでむりやりふやしてる
                metrics.width,
                fontSize + 4
            );

            cCtx.fillStyle = 'rgb(255, 255, 255)';
            cCtx.fillText(text, rowMiddle, rowBottom);
            row_i++;
        });
    }

    // ここで cCtx からうまく画像を吐くなりなんなりする
};

var copyFrame = function (immediatelyGyazoIt) {
    var vEle = document.getElementById('player');
    var textTrack = vEle.textTracks[0]; // 便利なのあった
    var cues = textTrack.activeCues;
    if (textTrack.mode == 'showing' && cues.length > 0) { // textTrack.mode は Chrome 47.0.2526.111 だと自前のボタンでいれかえないと更新されなかったので注意
        _copyFrame(cues[0].text);
    }
    else {
        _copyFrame(null);
    }

    return false;
};