Youtube-Multi-Player
Youtubeで複数動画を同時再生できる何か
なんでつくったか
ドラムが趣味で、叩いてみた動画を作るも、著作権の関係で背景に音楽載せて公開したらアウトっぽいことが判明。
youtube, ニコニコ動画の場合演奏動画をupするのはセーフ (twitterはアウト？)
全部自分たちで演奏するのはセーフ、CD音源やPV動画を流したらアウトらしい。
そこで、自分の中でyoutube同時再生なら大丈夫そうとの結論がでた。
製作期間
今年のGWの何日かを使って作った。
僕はWeb開発のバックエンドしか触ったことなくて、フロントはさっぱりわからんので最低限の機能を備えたデザイン性皆無のものしかできあがらなかった。
使い方
- ./src/multiplayer.htmlをダウンロードしてブラウザで開く
- https://www.youtube.com/watch?v="ほげほげ"の動画を再生したいなら, Video IDにほげほげと入力
- add video listボタンを押したら入力欄が増えます
- start timeに値を入れると任意の開始時間が選べます
- 追加が終わったらgenerateボタンで動画が再生されます
Option:一度追加が終わったら、JSON dataが生成されるので、次回からはJSON dataに生成された文字列をコピペして、load JSONすれば動画が再生されます。
play, pause, resetボタンはすべての動画に対して、play, pause, resetの命令を行う。
もし、タイミングが悪かったら、pause、reset、playを繰り返してみてください。
JSON dataに
[{"yid":"n7MyoBki9wk","start":"0.1"},{"yid":"rH9tkCuz7vg","start":"0.6"}]
と入力してみると、僕の叩いてみた動画と原曲が再生されるので、よかったらどうぞ。（まだまだ下手くそなのでもっと練習します。）
以下のものは、自分があたかもバンド演奏できているみたいでニヤニヤできます。
[{"yid":"nBgbzRRxBAI","start":"0.11"},{"yid":"rH9tkCuz7vg","start":"0.6"},{"yid":"9lXnmUOz7aA","start":"0.1"},{"yid":"l78zlPngMFs","start":"0.1"}]
他にも、いろんな演奏してみたと同時再生してみて、勝手にバンドを編成するみたいな楽しみ方もできそうです。
ひとりごと
動的なwebページを公開する一番簡単な方法ってなんなんですかね。
github webpagesを使ったらhtml公開できることを知ったのですが、どうやら静的なページのみらしいので。。。
追記(2018-06-05)
Github Pagesだと静的なページしか見れないとの情報を見たので、諦めていたのですが、http経由でjqueryをimportするのではなく、直接ファイルから読み込むようにすれば、Github Pages上でも動的なページを公開することができました。
以下のリンクから、Github Pagesが見れます。 JSON data 内に[{"yid":"nBgbzRRxBAI","start":"0.11"},{"yid":"rH9tkCuz7vg","start":"0.6"},{"yid":"9lXnmUOz7aA","start":"0.1"},{"yid":"l78zlPngMFs","start":"0.1"}]
と入力すると、ちゃんと複数動画再生されました。めでたしめでたし。（次はデザインをこだわりたいところ。）
https://mash810r.github.io/youtube-multi-player/src/multiplayer.html
