Youtube Data API - 再生リストのサムネイルとプレビュー

公開:2015-01-12 18:11
更新:2017-07-30 10:00
カテゴリ:d3.js,youtube,jquery,q.js,javascript,youtube viewer

続いて再生リストのサムネイル表示に取り組んでみた。

再生リストのサムネイルとプレビュー

今回は動きを少し工夫してみた。

  1. まずプレイリスト一覧表示する。
  2. プレイリスト一覧のサムネイルをクリックするとプレイリストの中身をサムネイル表示する。
  3. サムネイル表示をマウスでポイントするとプレビュー再生する。
  4. チャンネルIDを変更すると他のチャネルのプレイリスト一覧を表示する。

チャンネルIDはほとんど表に出てこないIDであるので探すのに苦労するかもしれない。やはりユーザー名からチャンネルIDを列挙する機能は必要だろう。次のサンプルで取り組もうかなと考えている。ちょっと他のチャンネルも表示してみたけど意外に有名なチャンネルって公開再生リストが少ないのね。。

ちなみにチャンネルIDの見つけ方だけど、Youtubeでチャンネルを登録すると次にチャンネルを「登録チャンネル」から選択したときに表示されるURLの末尾がチャンネルIDである。

https://sfpgmr.github.io/images/2013/08/081301.png

プレイリストの中身は100個以上あるので、bl.ocks.orgのソースコードを参考に無限スクロールチックな表示にしてみた。トランジション等は使ってないので動きにとぼしいページではある。

若干課題を残している。

なんか試しているうちに結構面白くなってきたのでしばらく続けることにする。