今日も一日

自分の書きたいことを書きます

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`

f:id:shiroiatori_1027:20190403174342p:plain:w300

ブックマークを押すと同じ秒数から再生されます!
これで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で新しくパラメータを追加します。

以上です。

自己紹介的なの

特定分野の記事を書くのではなく、自分が書きたいと思ったことを書きます。 この記事はブログのトップページ的なものです。

プロフィール

IT専門学校に通っている学生です。
IPFactoryという技術サークルに入っています。
セキュリティが少々、プログラミング(開発経験約1年)、動画編集や画像の加工等ができます。

QiitaとGitHubのアカウント

続きを読む