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

はじめに

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

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

そういうときは！

時間になったら勝手に動画が再生されるアプリ

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

なぜこんなアプリを作ったか

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

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

使い方

1. 動画をリストから選ぶ。
2. 「決定」を押すとプレイヤーが表示される。
3. あとは、時間が来るのを待つだけ！

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

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

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

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

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秒だけ再生させることで、再生するところのバッファを取ることが出来ます。

作るときに使ったもの

• JavaScript

  • これがないと何も始まりません。

• jQuery

  • グリッドを増やしたり減らしたりDOM関係に使っています。

• YouTube IFrame Player API

  • プレイヤーを表示したり、動画を再生したりするのに使っています。

• SCSS

  • 変数とかを使いたかったのでCSSに近いSCSSを使いました。（あまり使いこなせていないけど…）

• Google Fonts

  • 文字をきれいにしたかった。

おわり

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

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

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

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

では、良いお年を！