キーボード操作で動画のシークバーを無理やり動かした

4949 ワード
EventListener chrome-extension JavaScript JavaScript テキストリンク

概要

動画サイトで動画を見てるとき、「ここ飛ばしたいな」って思うことがあります。
でもシーク禁止になっている場合、黙って時間が過ぎるのを待つしかないです。
それが凄く時間の無駄に思えたので、無理やりシークバーを動かす方法がないか調べてみました。

そして見つけたのが、デベロッパーツールからコンソールで以下のコマンドを実行するというものです。

$('video').currentTime += 10 // 10秒進める

Chrome拡張機能を使って、上記コマンドをキーボード操作から実行できるようにしました。

作ったもの

必要なファイルは3つだけです。

manifest.json
content.js
jquery.min.js
manifest.json
{
    "manifest_version": 2,
    "name": "Video Seeker",
    "description": "動画のシークバーを操作します",
    "version": "1.0.0",
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["content.js","jquery.min.js"]
    }]
}
content.js
document.body.addEventListener('keydown', event => {
    if (event.ctrlKey && $('video')) {
        if (event.key === 'ArrowRight') {
            $('video')[0].currentTime += 30;
        } else if (event.key === 'ArrowLeft') {
            $('video')[0].currentTime -= 30;
        }
    }
});

Ctrl+→で30秒進め、逆にCtrl+←で30秒戻します。

結果

この拡張機能を導入してから、快適に動画を見られるようになりました。
正直微々たるものですが、かけた労力に比べればまあまあな成果です。

JAva遍歴xmlファイル内容の読み出し
.NETプロジェクトJAVA再構築の圧縮&解凍