はじめに
Chromeでローカルにあるビデオや音声ファイルを開くと再生することができます。しかし、一時停止、再生、音量の変更、Picture in Pictureしかできません。再生速度とか変えたいですよね。そこで、Chrome Extensionを作って機能を拡張してみました。作成するエクステンションはスピードの変更(0.1倍速から16倍速まで)、5秒進む、5秒戻る、ループ設定(ON,OFF)、音量の変更、ミュート(ON,OFF)をキーボードショートカットで行えるようにするものです。やってみると意外と簡単でした。
chrome extension を作成する
エクステンションを作成していきます。ディレクトリを作成し、その中にファイルを作成していってください。
manifest.jsonの作成
chromeのextensionを作るためには、まずmanifest.jsonを作成する必要があります。これは、エクステンションの名称やバージョン、実行するファイルなどの設定を記述します。現在のmanifest_versionの最新は3なのでmanifest_versionを3としました。permissionsはエクステンションが必要な権限を記載します。content_scripts.matchesでは、このエクステンションがいつ有効になるかを設定します。URLがこれによって設定されているパターンとマッチしたときにエクステンションが有効になります。今回はfile://で始まると有効化されます。content_scripts.jsで実際に実行するファイルを指定します。iconsには、アイコンのパスを設定します。
1{
2 "manifest_version": 3,
3 "name": "Hattomo chrome media controller",
4 "version": "0.0.1",
5 "description": "Chrome video media controller!",
6 "author": "Hattomo",
7 "permissions": [
8 "declarativeContent"
9 ],
10 "content_scripts": [
11 {
12 "matches": [
13 "file://*"
14 ],
15 "js": [
16 "content.js"
17 ]
18 }
19 ],
20 "icons": {
21 "32": "icons/favicon-32x32.png",
22 "128": "icons/apple-icon-180x180.png"
23 }
24}
content.jsの設定
content.jsでは、videoタグがあるかを確認し、videoタグがあった場合、videoタグのidとしてvideo_idを指定します。videoタグがあるかを確認するのは画像などを開いた場合ビデオタグが見つからずのちの操作でエラーが出てしまうためです。その後、キーイベントのリスナーを登録し、イベントの発生を待ちます。動画や音声の操作は先ほど設定したidを使って行います。動画の速度や音量については、取れる値の幅に制限があるため、その制限を超えないよう実装します。また、iを押すとアラートダイアログがでて現在の速度などが表示されるようにしました。
1let video_element = document.querySelector('video');
2if (video_element.id != null) {
3
4 video_element.id = 'video_id';
5 media = document.getElementById("video_id");
6
7 document.body.addEventListener('keydown',
8 event => {
9 playbackRate = 0.1;
10 volumeRate = 0.05;
11 if (event.key === 'f') {
12 // fast
13 if (media.playbackRate + playbackRate < 16) {
14 media.playbackRate += 0.1
15 } else {
16 media.playbackRate = 16
17 }
18 console.log("fast : " + media.playbackRate);
19 } else if (event.key === 's') {
20 // slow
21 if (0.1 < media.playbackRate - playbackRate) {
22 media.playbackRate -= 0.1;
23 } else {
24 media.playbackRate = 0.1;
25 }
26 console.log("slow : " + media.playbackRate);
27 } else if (event.key === 'l') {
28 // loop
29 if (media.loop) {
30 media.loop = false;
31 } else {
32 media.loop = true;
33 }
34 console.log("loop : " + media.loop);
35 } else if (event.key === 'm') {
36 // mute
37 if (media.muted) {
38 media.muted = false;
39 } else {
40 media.muted = true;
41 }
42 console.log("muted : " + media.loop);
43 } else if (event.key === 'ArrowRight') {
44 // skip
45 media.currentTime += 5;
46 } else if (event.key === 'ArrowLeft') {
47 // skip
48 media.currentTime -= 5;
49 } else if (event.key === 'ArrowUp') {
50 // volume
51 if (media.volume + volumeRate < 1) {
52 media.volume += 0.05;
53 } else {
54 media.volume = 1;
55 }
56 console.log("volume : " + media.volume);
57 } else if (event.key === 'ArrowDown') {
58 if (0 < media.volume - volumeRate) {
59 media.volume -= 0.05;
60 } else {
61 media.volume = 0
62 }
63 console.log("volume : " + media.volume);
64 } else if (event.key === 'i') {
65 msg = "Playback Speed " + media.playbackRate + "x\nLoop : " + media.loop;
66 alert(msg);
67 }
68 });
69}
エクステンションを読み込み使ってみる
chrome://extensions/にアクセスし、開発者モードを有効にした後、エクステンションを読み込むことで使い始めることができます。例えば、fを押して再生速度が速くなっていけば成功です。
Chromeには、現在英語のみですが、字幕の自動生成機能も新しくついたので、専用のビデオ再生ソフトよりもこれを使ったほうが便利になりそうです。