RYO.dev

最終更新日:

【概要】動画倍速再生

  1. 動画を倍速で再生するサービスを作りました!
  2. きっかけ
  3. 特徴
  4. 画像・アイコン・コード
  5. 謝辞
  6. 最後に

動画を倍速で再生するサービスを作りました!

動画をドラッグ&ドロップしてください。もしくは、画面をクリックするとデバイスのストレージが開くので、動画を選択してください。

動画倍速サービスのトップページ

その動画をブラウザ上で再生できます。しかも、再生速度を変えられます

動画倍速サービスの動画再生画面

作ったきっかけやサービスの特徴などを紹介します。

使ってみる

きっかけ

僕には大学生の弟がいます。新型コロナウイルスの影響で弟はオンライン授業を受講しています。教授から送られてくる講義動画を見て勉強しているのですが、先生の話スピードが遅いことに不満を感じていました。

自分でもいろいろ試行錯誤していたようです。動画を飛ばし飛ばししてみたものの内容が理解できない。音声をスマホで録音して倍速再生してみたものの講義動画は数十分の長さがあるので手間がかかりすぎるし映像とマッチさせるのが面倒。

僕がパッと思いついたのはYouTubeにアップロードすることでした。YouTubeなら倍速再生できますからね。ただ、一般公開するのは問題ありそうなので、自分だけしか見れないように設定する必要がありますが。これも手間がかかりますね。じゃあ動画を倍速再生するWebサービスはないのだろうか。検索してみた。1分くらい探しましたが、ソフトインストール型のものしか見つかりませんでした。

「じゃあ作るか」

もしかしたら弟と同じ悩みを持つ学生がいるかもしれません。そんな彼らにはきっと需要があるはずだと考え、作ることにしました。

特徴

画像・アイコン・コード

トップページの文字上の画像はunDrawさんから拝借しました。

メーターアイコンと左矢印アイコンはFont Awesomeさんから拝借しました。

ドラッグ&ドロップのコードはRead files in JavaScriptの記事を参考にしました。

ファイルを読み込んで表示させるためのコードは<input type="file"> - HTML: HyperText Markup Language | MDNの記事を参考にしました。

本サービスの機能を作るコードはすべてJavaScriptなので、デベロッパーツールからコードを確認できます。

謝辞

このサービスについてTwitterで紹介したところ、明治大学で教鞭をとっておられる水田周平先生(@Johnevang)にリツイートしていただきました!
このサービスの紹介ツイートを水田先生がリツイート

RT日時:2020.06.10

ありがとうございましたm(__)m

最後に

誤った情報を見つけたり、お聞きしたいことがあったり、動画倍速再生サービスのバグを見つけたりしましたら、TwitterのDMメールまでご連絡ください。