youtubeで1秒スキップするショートカット

概要

youtubeの動画再生中に1秒スキップするショートカットを作成するコードを作りました。先に言っておくと、youtubeではデフォルトで以下の便利なショートカットがあります。ただ、5秒では進み過ぎてしまう場合など、スキップ時間をカスタマイズしたい時に役に立ちます。

※youtubeにデフォルトで備わっているショートカット例
・「→」 ： 5秒進む
・「←」 ： 5秒戻る
・「L」 ： 10秒進む
・「J」 ： 10秒戻る
・pause中に「.」 ： 1フレーム進む
・pause中に「,」 ： 1フレーム戻る

作成にあたって、tampermonkeyというchrome拡張機能を使用しました。※tampermonkeyの参考
この拡張機能はユーザースクリプトといって、ユーザー独自のスクリプトをwebサイトを閲覧する際にそのユーザーにだけ反映させる事ができます。コードの仕様はjavascrpt同様です。

コード

// ==UserScript==
// @name         youtubeskip1s
// @namespace    test
// @version      0.1
// @description aaaaa
// @author you
// @match https://www.youtube.com/*
// @grant none
// ==/UserScript==
(function() {
var skip1s = function(evt) {
    if (evt.keyCode === 219) {//左カッコ「[」
        var ytPlayer = document.getElementById("movie_player");//前準備
        var currentTime = ytPlayer.getCurrentTime();//現在の再生時間を取得
        ytPlayer.seekTo(currentTime - 1);// 1秒戻る
}
    if (evt.keyCode === 221) {//右カッコ「]」
        ytPlayer = document.getElementById("movie_player");//前準備
        currentTime = ytPlayer.getCurrentTime();//現在の再生時間を取得
        ytPlayer.seekTo(currentTime + 1);// 1秒進む
}
}
document.addEventListener("keydown", skip1s, false);//keydownが起きた時にskip1sを実行
})();

最初の方で

// @match https://www.youtube.com/*

とすることで閲覧しているページアドレスが「https://www.youtube.com/* 」（youtubeの動画アドレス）と一致した時のみスクリプトを実行します。

一番最後の

document.addEventListener("keydown", skip1s, false);//keydownが起きた時にskip1sを実行

は、何かキーボードが押された時に「skip1s関数」を実行するという意味です。押されたキーが目的のものかどうかの判定はskip1s関数内のifによって行っています。

使い方

まずtampermonkeyをインストールします。方法はこちらの通りです。
その後、アイコンを押して「ダッシュボード」を選択し、新規スクリプトを作成し、先程のコードを貼り付けて実行させることで準備完了です。
使用する時は
・「[」(左カッコキー) ： 1秒戻る
・「]」(右カッコキー) ： 1秒進む
になります。なぜこのキーかというと、youtubeのページでは元々色々なショートカットキーが既に割り当てられており、重複を避けるためにこのようなキー割り当てにしました。

まとめ

コード自体あまり複雑でないため、工夫次第でさらに汎用的な使い方が可能だと思います。是非参考にしてもらえると嬉しいです。

もしよければこちらの記事もどうぞ。↓
wordでギリシャ文字を素早く入力する
通常マウスでコピー,ペースト,戻るなどができるようにするマクロ

参考にしたサイト

https://www.tam-tam.co.jp/tipsnote/javascript/post6217.html
https://stackoverflow.com/questions/6970013/getting-current-youtube-video-time