YouTubeに3秒巻き戻し／早送りボタンを追加するブックマークレット

javascript:(()=>{const e=document.createElement("div");e.setAttribute("class","🔘"),e.textContent="＜",document.body.appendChild(e);const t=document.createElement("div");t.setAttribute("class","🔘"),t.textContent="＞",document.body.appendChild(t);let n=document.getElementsByClassName("🔘");n=[].slice.call(n);const o=e=>{const t=n.indexOf(e.target);document.getElementsByTagName("video")[0].currentTime+=3*(2*t-1)};for(let e=0;e<2;e++)n[e].style.cssText="z-index:99999;position:fixed;bottom:120px;"+`right:${20-60*(e-1)}px;`+"color:#222;font-size:10pt;text-align:center;height:50px;width:50px;line-height:50px;border-radius:50px;border:1px solid #aaa;background:#eee;opacity:.5;user-select:none;-webkit-user-select:none;",n[e].addEventListener("click",o);document.body.style.touchAction="manipulation",document.styleSheets.item(0).insertRule("c3-material-button {pointer-events: none}",0)})();

これは何？

スマホで動画を視聴している時に3秒だけ戻したい、という願望を実現するものです。

使い方

1. youtube.comでこのブックマークレットを実行します。
2. ボタンが表示されるので、ここぞという時に押します。

簡潔な説明

上記コードは以下のコードを圧縮したものです。

(() => {
// --------

// BTN_0
const btn_0 = document.createElement('div');
btn_0.setAttribute('class', '🔘');
btn_0.textContent = '＜';
document.body.appendChild(btn_0);

// BTN_1
const btn_1 = document.createElement('div');
btn_1.setAttribute('class', '🔘');
btn_1.textContent = '＞';
document.body.appendChild(btn_1);

// BTNs
let BTNs = document.getElementsByClassName('🔘');// HTMLCollection
BTNs = [].slice.call(BTNs);// => array

// skip
const skipp = (e) => {
    const idx = BTNs.indexOf(e.target);
    // 🔘[0] => back
    // 🔘[1] => forward
    document.getElementsByTagName('video')[0].currentTime += 3 * (2 * idx - 1);
}

// BTNs: style and EventListener
for(let i=0; i<2; i++){
    BTNs[i].style.cssText = 
        'z-index:99999;' +
        'position:fixed;' + 

        'bottom:120px;' +
        `right:${20 - (i - 1) * 60}px;` +

        'color:#222;' + 
        'font-size:10pt;' + 
        'text-align:center;' +

        'height:50px;' +
        'width:50px;' + 
        'line-height:50px;' + 
        'border-radius:50px;' +

        'border:1px solid #aaa;' +
        'background:#eee;' +
        'opacity:.5;' + 
        'user-select:none;' + 
        '-webkit-user-select:none;';
    BTNs[i].addEventListener('click', skipp);
}

// body => double tap: off
document.body.style.touchAction = 'manipulation';

// c3-material-button => touch: off
document.styleSheets.item(0).insertRule('c3-material-button {pointer-events: none}', 0);

// --------
})();

1. <div>を２つ作り、これをボタンとみなしてEventListenerを指定する。
2. ボタンがタップされてイベントが発生するたびに、document.getElementsByTagName('video')[0].currentTimeの値が増減する。秒数のところはお好みで変更して欲しい。
3. ボタンの大きさと色合いとかたち、表示位置についてstyleを記述。このあたりも微調整するといい。
4. また、ダブルタップの無効化、一部要素のタッチイベントの無効化を施している（が、使用環境によって機能しない場合がある）。

あとがき

外国語学習、特に動画を見ながらリスニングの訓練をする時に便利なんじゃないかと思います。
よかったら使ってください。

本日もありがとうございました。

参考

感謝します。

• https://qiita.com/takahasinaoki/items/60af70d47dee904caf27