video-transcript-note というElectronアプリを書きました。

一言で説明するならば、PDFを見ながらMarkdownでメモを取れるアプリを書いたの動画版です。

インストール

latest binaryから最新のバイナリを落として起動すればいけるはずです。

Linuxも多分動くんだと思いますが、何か妙にバイナリが大きいかったのでビルドからは外してます。(適当に修正PRでも下さい)

機能

機能としては、HTML5 Video + <track>による字幕 + CodeMirrorでのMarkdownメモと言った感じのアプリです。

• HTML5 Video player
  • • keyboard shortcut
• ルビ翻訳された字幕
  • English to 日本語
• Markdown Note
• Quote from Video and Transcript.
  • Cmd+T/Ctrl+T

ルビ翻訳は英語の文章をルビ翻訳(ふりがな和訳)するGreasemonkeyを書いたと殆ど同じ仕組みで、辞書として簡短英日辞典を使っています。

• gunyarakun/kantan-ej-dictionary
• Netflixの英語字幕に日本語訳をつけるChrome拡張「Netflix Subtitles Extender for Japanese」をリリースしました
• azu/kantan-ej-dict (npmモジュール)

また”Quote”の機能としては、現在表示中の動画のスクリーンショット+再生時間+表示されてる字幕を引用してエディタに追加する形となってます。

ローカルの動画ファイルパスを入力すれば再生が開始されます。(最初にpreloadするのでちょっと待つ必要があります) 字幕は動画ファイル名と同じ名前で、.srtか.vttの字幕ファイルが動画ファイルと同じディレクトリに存在していれば読み込まれます。

rg3/youtube-dlで

youtube-dl --write-sub

などで字幕付きの動画を見てみるのが早いのかもしれないですね。 (video-transcript-noteにダウンロード機能はないです)

仕組み

基本的にHTML5 Videoの機能にそのまま乗っかっています。

• azu/video-prefetcher
  • 最初にXHRで動画を全部ロードしてblob urlをvideo.srcに設定する
• azu/video-shortcut-controller
  • 矢印でシーンスキップなど基本的なショートカットをつける
• azu/video-transcript-tracker
  • <track>要素の字幕が切り替わった時にその内容をテキストして取得する

上記のようなライブラリを作って使っています。

最後の<track>要素が結構面白くて、HTML5 Videoでは.vttという拡張子の字幕ファイルを<track>要素で指定できます。

• track 要素の基礎 - HTML5 Rocks
• track 要素のスクリプトによる操作 (Windows)

youtube-dlなどでYoutubeの動画を確認してみると.srtの動画もあったりしますが、video-transcript-noteではsrt2vttで自動的に変換してどちらでも扱えるようにしてます。

この字幕は非表示(disableとは別)の場合でも、“cuechange”というのが発生して字幕の内容が変わったことができるようになっていて、その辺を楽に使えるようにしたのがazu/video-transcript-trackerというライブラリです。

これを使うと字幕を再生してるタイミングのものをテキストとして取得できるので、それをルビ翻訳して表示しているという感じですね。

HTML5 Video(+fallbackにflash)というは大量にあるのですが、<video>や<track>を扱う細かいモジュールは意外とないです。

• HTML5 Video Player Comparison

ここに出てくるライブラリは商用っぽかったり、いわゆる動画プレイヤーでしかないようなものが多くて、今回みたいなことをするの向いてない感じがしたので素の<video>を扱ってます。 (videojs/video.jsとかは結構面白そうだった)

今回はメモ要素が必要だったのでElectronアプリにしてますが(NW.jsだと何かコーデックが面倒そうだった)、単純に<video>と<track>を扱う部分については普通にブラウザでも動作します。

実際にこのアプリを内部的なモードを切り替えればブラウザでも動きそうな気がする(途中まで完全にブラウザで開発してた)ので、<video>と<track>とかで遊んでみるのも良いかもしれません。