動画眼2 動画眼Liteについて

動画眼Liteについて

こちらは旧バージョンのページです。現行バージョンはこちら。

動画眼2は、タイムインデックス情報付きのメモ／発話ログを使って動画の当該箇所に瞬時にジャンプできる、UT／インタビューふり返り用のプレーヤーですが、

Windows版しかない
こんなマイナーなツールを関係者に薦めづらい（笑）
未署名なため、インストール時にSmartScreenやセキュリティソフトが警告を出す場合がある

などの問題点がありました。3番目の署名は年間数万ほど必要で、フリーで公開している都合上、なかなかふんぎりがつかず申し訳ありません。いずれにせよ、いきなりインストールをしてもらうのではなく、先にお試しいただいて、どんなことができるのか体感していただいてから判断してもらえるようにしたいと考えました。

そこで今回HTML5+JavaScriptのみで編集以外の機能を実現した動画眼Liteを開発いたしました。特徴としまして、

HTMLファイル1つで実装しているので、実行するのはどなたの環境にも入っているブラウザであり、追加のアプリケーションインストールが不要
Windows/macOS/Linuxを問わず使用可能（モバイルOSでも動作は可能だと思いますが、スマホの画面サイズ対応は課題）
JavaScriptの制約上、専用のデータ形式ファイルが必要（動画眼2.4にてエクスポート対応）
現状、メモ／発話記録の追加や編集には非対応（ブラウザからデータファイルの上書きがセキュリティ絡みの制約で禁止されているため）

といったものがあります。つまり最初にデータを作る人は動画眼2のインストールが必要ですが、完成したインデックスメモを使って他の関係者に閲覧だけしてもらうのであれば、

動画ファイル（mp4推奨）
専用形式データファイル
動画眼Lite本体HTMLファイル

の3点セットでお渡しすれば、受け取った側はHTMLファイルをダブルクリックするだけで始められることになります。2.と3.であわせても数十KB程度のサイズしかありません。

あるいはこの3点セットをWebサーバーに置いてもらえれば、そのURLを共有するだけ済みます。

動画眼Liteデモ

こちらでサンプル動画での動作の様子をお試しいただけます。（UT／インタビュー動画ではなくすみません、、、）

右側にあるリストから適当な発話ログをクリックしていただき、動画の当該箇所が再生されることを御確認ください。また右上のテキスト欄に検索語を入力すると、瞬時にそれを含む発話箇所を見つけることができると思います。車載用モバイルルーターのレビューをしている動画なので、「電源」とか「車」などと入れてみてください。

準備方法

前述の通り、配布に必要になるのは、

動画ファイル（mp4推奨）
専用形式データファイル
動画眼Lite本体HTMLファイル

の3点セットです。

動画ファイルは原則mp4を推奨とします（詳細は次項の「対応メディア形式」をご覧ください）。

専用形式データファイル（.json.js）は「ログファイルフォーマット」に従って手作業で作成いただくこともできますが、Windows用ソフト「動画眼2」を使って作成していただくのが簡単です。同ソフトで保存されたログデータは.dggn.txtという拡張子のテキストファイルになりますが、これを直接動画眼Liteで使うことはできず、「ファイル」→「動画眼Lite形式で書き出し」から出力します。拡張子は.json.jsとなります。

動画眼Lite本体のHTMLファイルは、上記書き出し操作をすると自動的に配布サーバーから最新版をダウンロードして適切にリネームをして保存してくれます。複数の動画セットを用意する場合はご自身でコピーしてファイル名だけ揃えていただいても結構です（中身は同一です）。手動ダウンロードはGithubリポジトリでも可能です。任意のバージョンのindex.htmlをダウンロードしリネームしてください。

これら3つが拡張子違いの同名で同一フォルダ内に揃っている必要があります（.dggn.txtは必要ありません）。例えば、動画がhoge.mp4であれば、hoge.json.jsとhoge.htmlが同じ階層に存在するようにします。1つのフォルダにこの3点セットが複数組混在していても構いません。htmlファイルが開かれると、自身のファイル名を調べて、同名の動画とデータファイルを自動的に開きにいきます。

使い方

3点セットをメール、Dropbox等なんらかの手段で相手方にお渡しします。受け取った側は3つのうちhtmlファイルをダブルクリック等で開けば標準ブラウザで開きます。標準でないブラウザで開きたい時は、htmlファイルを右クリックして選ぶか、開きたいブラウザのウインドウにhtmlファイルをドロップします。

Webサーバーにアップロードした場合は、htmlファイルを指すURLをブラウザで開きます。

正常に開けば、上記デモのような画面が開きます。右リストにメモ／発話一覧が出ない場合、json.jsファイルが見つからないか中身の形式に問題があるかも知れません。再生ボタンを押しても再生されない場合は、動画が見付からないか形式に問題があるかも知れません。

操作方法は画面下部に記載されています。

対応メディア形式

ひと言でいうとmp4です。

動画再生は各ブラウザ、バージョンに依存します。一覧はWikipediaの一覧がわかりやすいです。縦軸がブラウザ、横軸がコンテナ／コーデックですが、MP4が安牌だとおわかりいただけるかと思います（内部コーデックはH.264）。逆に一昔前のDVDレコーダーで使われていたMPEG2（.mpg）などはブラウザでは表示できないのでご注意ください。.movや.m4vコンテナであれば、内部コーデックにもよりますが拡張子をmp4に変更するといけたりするかも知れません。

WebM系もブラウザ的には広まりつつりますが、ビデオカメラやレコーダーなどで直接収録できるものは皆無で、UT/インタビュー現場ではほぼ使われないだろうということで現状拡張子がmp4決め打ちで設計しています。JavaScriptをいじれる人ならHTMLファイルの172行目付近のinitialize関数の冒頭付近の拡張子mp4を置き換えていただけば動くかも知れません。

mp3やwav、aacなど音声のみのメディアファイルについても、videoタグをaudioタグに書き換え拡張子を調整すれば使える気がします。こちらも要望があれば対応するかも知れません。一応こちらもWikipediaの対応状況一覧貼っておきます。

対応ブラウザ

Micsoroft Edge（Chromium版）で開発を行っていますので、もっとも確実に動作すると思います。Google Chromeも中身はほぼ同じなので問題ないはずです。

FireFoxやSafariも基本的には動くと思いますが、レイアウトなど検証が甘いところがあるかも知れません。

ログファイルフォーマット

原則として動画眼2で出力することを推奨しますが、もし手編集で作成した場合は、以下の書式に従ってください。文字コードはUTF-8、拡張子は.json.jsです。

const scriptsJson = [
    { in:4,script:"こんにちは",speaker:0},
    { in:6,script:"こんにちは",speaker:1},
    { in:7,script:"本日は調査にご協力ありがとうございます。",speaker:0},
    { in:10,script:"本日進行を担当させていただきます\"古田\"と申します。",speaker:0},
    { in:13,script:"どうぞ、よろしくお願いいたします。。",speaker:0},
    { in:15,script:"よろしくお願いいたします。。",speaker:1}
];

in	in点、つまり発話のスタート時点を秒で示したものです。 60秒を超えても1:01のようにはならず、61とします。
script	メモ／発話内容です。""で囲みます。途中に「"」を含ませたい場合は\（半角のバックスラッシュまたは￥マーク）を入れて「\"」のようにします。
speaker	発話者を区別する番号です。これに応じて表示色がかわります。区別の必要がなければ全て0で構いません。現状0～7の8色を用意しており、8以上の数値は無視されます。

先頭行に「const scriptsJson = [」、最終行に「];」を入れてください。
各行の{}の後に「,」（半角カンマ）をつけますが一番最後だけはつけません。

ライセンス

動画眼2と同様、MITライセンスに基づいてご利用いただけます。商用、非商用問わず無料です。クレジット表示とソースコード内のライセンス文さえ残していただければ改変、再頒布を可能です。詳細はライセンスページを御確認ください。