More than 3 years have passed since last update.

時間になったら動画が再生されるサイトを作った

Last updated at 2020-12-27Posted at 2020-12-27

はじめに

年越しは「ウルトラソウルハイッ！」でしたいですよね？

でもタイミングを合わせるのが難しい…

そういうときは！

令和が始まる瞬間の画像（2019年の年越しのときは撮るの忘れてた）

「12月31日の23時58分54秒にウルトラソウルを流すとウルトラソウルハイッ！でちょうど新年を迎えられる」ということをTwitterなどで見て、
もっと楽にウルトラソウルを流したい…なんて思ったのがきっかけです。

それと、他の曲一緒に流して~~うるさい~~楽しい年越しを迎えたいということでこのアプリを作りました。

自動的に動画が再生されていきます。

動画が再生される時刻より動画を選ぶ時刻の方が遅いと、再生されません。

なので、余裕を持って動画を選んでください。

左上のボタンから音量や動画の数を増やしたり減らしたり出来ます。

30個まで増やすことが出来ます。

もちろん、動画を増やすとその分PCスペックやネット回線を多く使うようになるので、高負荷にならないように気をつけてください。

高負荷になるとタイミングがずれる可能性があります。

スマホだと小さすぎて何も見れないので、PC推奨です。

あらかじめ、動画IDなどが書いてあるjsonファイルを読み込んでタイミングを合わせています。

video-list.json

[
  {
    "name": "ultra soul",
    "id": "Ujb-ZeX7Mo8",
    "fit": 65,
    "start": 0,
    "end": 0
  },
  {
  }
]

このfitというプロパティが合わせるタイミングです。

startやendは動画が長過ぎるときに指定します。

動画を再生するのは setTimeout でしています。

0.5秒ほどタイミングに余裕をもたせたり、バッファのために1秒追加したりしています。

1秒だけ再生させることで、再生するところのバッファを取ることが出来ます。

こちらの記事を見て、タイミングを合わせるアプリ作ったなと思い出し、この記事を書きました。

実はこのアプリを作り始めたのが2018年末頃で、まだプログラミングは浅かった時期でした。

今見ても、きれいなコードとは言えません。

IssueやPRで動画の追加などを手伝ってくれると嬉しいです。

では、良いお年を！