国会動画のUIの欠点
YouTubeでは巻き戻し/早送り等のショートカットキーを使用できるが、衆議院インターネット審議中継や参議院インターネット審議中継では使用できなかった。
何回か聞かないと頭に入ってこないことがあり、ショートカットキーで巻き戻しや一時停止を行いたい。
国会動画にショートカットキーを追加してみた
HTML
<video preload="metadata" playsinline="" webkit-playsinline="" src="blob:http://www.shugiintv.go.jp/7770cb33-4a44-5f67-8d9f-abcde88b8811" style="width: 100%; height: 100%; pointer-events: none; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 1;"></video>
JavaScript
> $$("video")[0].currentTime
< 6711.462079
<video>の属性値currentTimeは開始してからの秒数を表しており、この属性値に値を代入すれば再生位置を変更することができる。
実は、巻き戻し/早送りは簡単にプログラミングすることができる。5秒巻き戻しならcurrentTimeから5を減算すればいい。addEventListenerでキーボードイベントを拾ってプログラミングする。
使い方
拡張機能のTampermonkeyなどを使ってユーザースクリプトを登録する。
ユーザースクリプトはGitHubで公開中。
https://github.com/querykuma/snippets/blob/master/kokkai/Add_ShortcutKeys_Kokkai.user.js
| キーボード ショートカット | 機能 |
|---|---|
| Space キー | 再生 / 一時停止。 |
| 左矢印キー / 右矢印キー | 5 秒巻き戻し / 早送り。 |
| j / l キー | 10 秒巻き戻し / 早送り。 |
| Control+左矢印キー / Control+右矢印キー | 30 秒巻き戻し / 早送り。 |
| Control+Shift+左矢印キー / Control+Shift+右矢印キー | 60 秒巻き戻し / 早送り。 |
| 数字の 1～9 | 動画の 10～90% の位置に移動。 |
| 数字の 0 | 動画の先頭(0%の位置)に移動。 |
| 上矢印キー / 下矢印キー | 音量を 5% 上げる / 下げる。 |
| f | 全画面モードで表示。全画面モードが有効になっているときに F キーまたは Esc キーを押すと全画面モードが終了します。 |
| q / w / e / r キー | 再生速度を1倍、1.25倍、1.5倍、2倍にする。 |
| b キー | 直前の再生位置に戻る(qwerキーと1234キーを間違えて押したときのため)。動画を閉じて開き直した場合、直前に開いていた再生位置に戻る。 |
基本的にYouTube互換のキーを採用しているが、Control+(Shift+)左矢印キーとQ/W/E/R キーとbキーを独自に追加した。
動作検証環境
Chrome 80.0.3987.132
Tampermonkey 4.9
Firefox 74.0