読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

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

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

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

https://bccq3a.dm2301.livefilestore.com/y2pWla47GPUHieLnuLsja8Or_L8LijA7QDeuGqPW0wGUxgwrCP3NWE1myZeIOhQrMUC1U0DZZYKhO3Ii8OVz3oGaKbBWVOVFvSzNX0k87yPHP1ZO3An3yaMZVqFQVBJ16FJrE-WggG9vGaVfpdznFvZUQ/1101.png?psid=1

 

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

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

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

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

https://bccq3a.dm2301.livefilestore.com/y2pIvXnZhkOlkDRHqkjFjDqDT-0cwla_bShZw_UuNZLrg8oNXiYNYtG_gw6eKRuWHAWKTDNHeurmLqQOmEPqX8lFAiU8Fy2y-oS7zRUF1glkDTXyDsrn48hRgh_-QiB1sqGo0wvrVvy-zPDZR3AEMZ3gQ/1301.png?psid=1

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

若干課題を残している。

  • 非公開の動画がプレイリストに含まれているとうまく動作しない。
  • マウスカーソルのイベント処理が甘いのかサムネイルからマウスカーソルが離れてもプレビュー再生を続けてしまう。
  • 「高く評価した動画」などのデフォルトの再生リストが一覧に含まれない。

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