Skip to content

Instantly share code, notes, and snippets.

@fuba
Last active April 5, 2016 16:04
Show Gist options
  • Save fuba/67004f49a32b860a2309 to your computer and use it in GitHub Desktop.
Save fuba/67004f49a32b860a2309 to your computer and use it in GitHub Desktop.
webvtt をcanvas に埋め込むあたり、jQuery が微妙にまざってるのは気にしないでください
// 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;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment