ホーム
3キーで動画速度を操る Chrome / Firefox 拡張「MarkN Video Speed」を公開しました

3キーで動画速度を操る Chrome / Firefox 拡張「MarkN Video Speed」を公開しました

動画の再生速度を、3つのキーだけで操れるブラウザ拡張機能「MarkN Video Speed」を公開しました。 Chrome / Edge などの Chromium 系ブラウザと、Firefox に対応しています。

なぜ作ったのか

動画を見ているとき、再生速度に関してやりたいことって、突き詰めると 「速くしたい」「遅くしたい」「等速と倍速を切り替えたい」 の3つだけだと思っています。 ところが既存の拡張機能を使っていると、ボタンの種類が多かったり、「等速リセット」と「倍速にする」が別ボタンで押し分けが必要だったり、別の動画に切り替えたときに速度がどうなるか予測できなかったりと、たった3つの操作のために妙な認知負荷がかかる場面がよくありました。

画面表示まわりも悩ましく、UI が動画に常駐すると集中の邪魔になる一方、YouTube ではプレイヤーUI に追従して勝手に出たり消えたりして、押したいときに見つからない。埋め込み動画や小さな音声プレイヤーでは表示領域を覆い尽くしてしまうこともあります。かといって UI を完全に隠してしまうと、今が何倍速なのか分からなくなる。

3つの操作だけで完結して、画面の邪魔にならず、それでいて速度はちゃんと分かる」——そのちょうど良い落としどころを自分で作ろう、というのが今回の動機です。

作ったもの

操作は3キーだけ、押し分け不要

ショートカットとポップアップ画面のボタンは、次の3つだけです。

  • 減速(既定: S キー)
  • 加速(既定: D キー)
  • 等速 ⇄ 指定速度のトグル(既定: R キー)

ポイントは3つ目で、「等速にリセット」と「倍速にする」を1つのキーのトグルにまとめてあります。R を押すたびに 1.0x ⇄ 倍速が切り替わるので、ボタンの押し分けが不要です。 さらに、加速・減速で調整した速度はそのままトグルの戻り先(指定速度)として記憶されます。視聴中に「もう少し速く」と微調整した速度が、そのままトグルの倍速側として残る挙動です。

設定した速度はブラウザに保存されるので、別の動画に切り替えてもタブを移動しても、毎回同じ速度から始まります。「次に再生したら何倍速になっているか分からない」という不安がなくなります。

キーは英数字(A-Z / 0-9)の範囲で自由に変更できるので、他の拡張やサイトのショートカットと衝突したら好きなキーに割り当て直せます。

オーバーレイは変えた瞬間だけ一瞬表示

画面には普段、拡張機能の UI は一切表示されません。 速度を変えたその瞬間にだけ、画面中央に「1.50x」のような表示が大きく出て、約 0.3 秒でスッと消えます。

変えた瞬間に必ず目に入って、すぐ消える。だから映像作品を集中して見ているときも邪魔にならず、それでいて「今の速度がわからない」状態にもなりません。 プレイヤーの UI に追従しないので、YouTube で勝手に消えてしまうこともなく、埋め込み動画や音声プレイヤーの上にも独立して表示されます。フルスクリーン再生中でも同じ位置に出ます。

インストール

Chromium 系(Google Chrome / Microsoft Edge など)の場合はこちらから:

Firefox の場合はこちらから:

ソースコードは GitHub で公開しています。

この記事を共有する

Xでポスト

おすすめの記事

AItuberKit Custom

AItuberKitを改造してわんコメ連携や最新モデル対応を追加しました(開発終了)

誰でも簡単にAIキャラクターとチャットできるWebアプリケーション「AItuberKit」をフォークして、いくつか便利な機能を追加しました。 使用方法は本家と同じです。 開発終了のお知らせ 本家がアッ …

プログラミング AI 作ったもの
竹あかりを作るアイテム

竹に穴を開けるアイテムを作った「竹あかり」

「ちょっぱや!バーチャル竹あかり」というイベントで使用された、竹あかり制作アイテムを作りました このアイテムを使うと、VR内で竹を丸鋸で切断して、ドリルを使って好きな場所に穴を開けたて、オリジナルの竹 …

作ったもの プログラミング Resonite おすすめアイテム イベント
Resonite Headless webUI

Resoniteヘッドレスサーバーをブラウザで簡単管理!「MarkN Resonite Headless Controller」を公開しました

こんにちは、「まーくん。(MarkN)」です。 Resoniteのヘッドレスサーバー、便利ですよね。常設ワールドを立てたり、フレンドがいつでも入れる場所を提供したりと、様々な活用法があります。 た …

Resonite 作ったもの プログラミング 解説
Koerec - 高速音声コーパス作成ツール のサムネイル

Koerec - 高速音声コーパス作成ツール

ブラウザだけで音声コーパスの作成が完結するWebアプリケーション「Koerec」を公開しました。 主な機能 台本管理: 事前定義台本の選択、カスタム台本のアップロード・編集 効率的な録音: ワンクリッ …

作ったもの プログラミング AI
Google Apps Scriptのロゴと、翻訳をイメージさせる吹き出しや地球儀のアイコンを組み合わせたもの。背景にうっすらとプログラムのコードが見えるデザイン

超簡単!GASで作る無料翻訳APIの作り方

「自分だけの翻訳APIを、無料で簡単に作れたら便利だと思いませんか? 実はGoogleアカウントさえあれば、プログラミングの経験がない方でも、意外と手軽に自作できるんですよ。外部サービスの契約やサー …

作ったもの Resonite 解説 プログラミング
飲むと虹やキラキラを吐き出す缶チューハイ「ストレゾ」

飲むとキラキラを吐く缶チューハイを作った【Resonite】

Resoniteで「飲むと虹やキラキラを吐く」アイテム 「ストレゾ(StrongReso)」 を作りました! ただ飲むだけではなく、缶のプルタブを開けたり、飲み終わった後に缶を潰せたりと、地味にこだわ …

Resonite 作ったもの おすすめアイテム