自習室

こもります

dropmark のビデオプレイリストの再生をループさせるChrome Extension を作った

動機

こんなことがしたい、と思いました

  • 余ってるPC + ディスプレイで、様々な動画を垂れ流しにしたい(会社でシェアしたい)
  • 極力簡単にプレイリストを管理したい
  • YouTube と Vimeo のリンクを貼るだけでOKみたいな感じがベスト
  • 全画面再生
  • ループ

イケてる動画をみんなであつめてそれを垂れ流しておくことで、ふとした瞬間に素敵な動画に出会えるたら良いなーというのが狙いです。

調査

公式

Vimeo だと、Likesなり Watch Laterなり Channel なりを、"Watch in Couch Mode" で再生開始すると、自動的に全画面 + ループになります。

f:id:AMANE:20150301201100p:plain

YouTubeだと、お気に入りなりプレイリストに、「繰り返す」ボタンがあります。これをONにしてから全画面再生すれば良い感じです。

f:id:AMANE:20150301201113p:plain

それぞれ良いのですが、会社で色んな人に登録してもらうとすると、両方のサイトにアップロードされている動画を扱いたくなります。

おしいやつ

Tumblrで動画を集めておくことはもちろん出来ますが、自動で再生していく機能はありません。

同じようなものがないかなーと探していたところ、dropmark というサービスの存在を知りました。

dropmark

自分も今回の目的以外で使ったことがないのでよくわかっていないのですが、いわゆるブックマークサービスです。その中の特徴的な機能として、ビデオのリンクを貼っておくと自動で再生してくれる機能、と言うのがありました。この記事で知りました

これで解決!と思ったのですが、ひじょーに惜しいことに、リストの最後まで行くと、そこで一覧画面に戻ってしまう仕様です。

そこで、Chrome Extensionを使って、ウェブサービスをハックしてみることにしました。

完成品と使い方

ぎっはぶ

ここに上げてあります

使い方

  • コードをPC内のどこかにおく
  • chromeの設定 > 拡張機能 > パッケージ化されていない拡張機能を読みこむ
  • フォルダを指定して開く

現状のコードは、すべてのウェブサイトに対して処理をしてしまうような物にになっているので、dropmarkを全画面で再生し続ける専用のPCを用意できる場合は良いのですが、もしご自身のPCで一時的に試してみたい、と言う場合は、利用しない場合は、拡張機能のリスト中で「有効」のチェックをはずしておくと良いかと思います。

f:id:AMANE:20150301205851p:plain

ついでに

YouTubeの再生を極力高画質で行いたいので、別途それ用のChrome-extension を入れます。この手の物はたくさんあるのですが、こいつはちゃんと動いていました

Vimeoの方は、ある程度大きくプレイヤーが開いたら、自動的に高画質になるので心配ありません。

設計(?)

主に、以下の三つのことをやっています。

  1. プレイリストの最後のビデオになったかの判定
  2. プレイリストの先頭のリンクを取得する
  3. 最後のビデオの次に、プレイリストの先頭のビデオを再生するようにハック

1. プレイリストの最後のビデオになったかの判定

これは、画面中の "Next Item" ボタンのハイパーリンクを見ることで判別出来ます。動画を指すURLではなく、動画一覧を指すURLだった場合は該当です。

f:id:AMANE:20150301202152p:plain

2. プレイリストの先頭のリンクを取得する

プレイリストのHTMLの中身を見て動画の一個目を指すURLを取得すれば良いのですが、実際は「最後の動画を見ている最中に」異なるページのHTMLを参照することになるので、少しトリッキーなことをします。

  1. jQuery<div> 要素を作ってその中にプレイリストのHTMLを丸っと挿入する
  2. その中から該当するHTML要素を見つける
$.get(playlisturl, function(data) {
  var playlisthtml = $('<div>').html(data);

jQueryのgetコマンドで動画一覧のページのHTMLを引っこ抜いてきて、それを <div> タグの中に展開することで、jQueryで解析可能なものにします。ここでこの <div>.append とかしなければ、その要素は表示されたりはしません。あくまでHTMLデータの中身を解析するためだけに一時的に存在するものになります。

プレイリストのhtmlを取得できたら、その中から、お目当ての「先頭の動画」のURLを見つけてきます

var firsturl = playlisthtml.find('.item-preview:first-child').attr('href');

3. 最後のビデオの次に、プレイリストの先頭のビデオを再生するようにハック

1.で、最後のビデオか判定するのに使った "Next Item" の href に、先ほど見つけてきた先頭動画のURLを代入すれば完了です。

まじで?

「えっ…?」って感じでした。次の動画への飛ばし方はちゃんと本家のjs読めばわかるかも知らん、気合い入れて解析してやろう!と意気込んで始めた直後、まぁそんなわけはあるまいと思いつつもものは試しでURL書き換えてやろーと適当こいたところ、出来てしまった、という感じです。結果オーライ、簡単で良かった。やったー

さいごに

と、説明しましたとおり、dropmarkの現状の実装を、偶然も織り交ぜつつ勝手にハックした感じですので、動作保証など一切できません。万が一ご入り用の方がいらっしゃった場合は十分ご理解の上ご利用ください。

3時間くらいで出来て良かったです。会社で運用してみます。