YouTubeを見ていて動画が固まった際に、同じ秒数で再読込するJavaScriptを書いた話。
なぜ作ったか?
YouTubeを見ていたら、唐突に動画が止まってイラッとする時がありませんか?
自分は譜面確認の為に秒数を戻すと、動画がよく固まります。
ブラウザをリロードすると、ピッタリ同じ秒数から始まらずに少し秒数が戻っていたり、運が悪いと最初から再生になってしまいます。
譜面確認しているのに秒数がズレたりすると、どこの確認していたか分からなくなりイラッとします。
YouTubeのパラメータを設定する
今回の問題は、リロードした際に同じ秒数で動画が再生されれば解決されます。
なので、YouTubeのパラメータを設定し同じ秒数から再生されるようにすればOKです!
YouTubeは&t
で動画の再生秒数を指定できるパラメータがあり、&t=1h02m34s
と設定した場合、1時間2分34秒から再生されます。
ということで、現在の秒数を取得しlocation.href
にパラメータを追加するJavaScriptを書きました。
[s, m, h] = document.getElementsByClassName('ytp-time-current')[0] .innerText .split(':') .reverse() .map(n => n | 0) h = h ? h + 'h' : '' m = m ? m + 'm' : '' location.href = location.href.split('&')[0] + `&t=${h}${m}${s}s`
適当なページをブックマークして、編集→URLに以下のコードを貼り付けて保存してください。
javascript:[s,m,h]=document.getElementsByClassName('ytp-time-current')[0].innerText.split(':').reverse().map(n=>n|0);location.href=location.href.split('&')[0]+`&t=${h?h+'h':''}${m?m+'m':''}${s}s`
ブックマークを押すと同じ秒数から再生されます!
これでYouTubeを見るときのストレスが、また1つ減りました。
以上で記事は終了です。折角なのでコードの解説を載せておきます。
ここを押すとコードの解説が見れます。
コードの解説
[s, m, h] = document.getElementsByClassName('ytp-time-current')[0] .innerText .split(':') .reverse() .map(n => n | 0) h = h ? h + 'h' : '' m = m ? m + 'm' : '' location.href = location.href.split('&')[0] + `&t=${h}${m}${s}s`
document.getElementsByClassName('ytp-time-current')[0].innerText
現在の秒数を取得します。
ytp-time-current
というclassが付与されていました。
.split(':')
時,分,秒に分割します。
コロンで分割するので'1:02:34' → ['1', '02', '34']
となります。
.reverse()
1時間未満の場合、時の桁が省略されるので、配列を反転させないと正しく変数に代入されません。なので.reverse()
で配列を反転させて対処しています。
1時間以上の場合、
[h, m, s] = ['1', '02', '34']
h = '1', m = '02', s = '34'
で正しく入ります。
1時間未満の場合、[h, m, s] = ['02', '34']
h = '02', m = '34', s = undefined
で正しく入りません。
反転した場合、[s, m, h] = ['34', '02']
s = '34', m = '02', h = undefined
で正しく入ります。
.map(n => n | 0)
値を整数にします。ビット演算で整数にしています。
['34', '02', '1'] → [34, 2, 1]
[s, m, h] =
秒,分,時を分割代入します。
[s, m, h] = [34, 2, 1]
h = h ? h + 'h' : '' m = m ? m + 'm' : ''
時,分がない場合は空にします。ある場合は値に単位を付与します。
h = undefined → ''
s = 2 → '2s'
location.href = location.href.split('&')[0] + `&t=${h}${m}${s}s`
現在のURLを書き換えます。
すでにパラメータが付与されている可能性があるので、.split('&')[0]
でパラメータを取り除いたあと、&t=${h}${m}${s}s
で新しくパラメータを追加します。
以上です。