Youtube再生リストのiframe埋め込みのURLをjQueryで取得する

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

Youtubeの埋め込みプレイリストのiframe内の動画URLをjQueryで取得する(Youtube JavaScript API)

Youtubeでは作成した再生リスト(プレイリスト)を自分のWebサイトに埋め込めるようにできるのですが、現在どの動画が再生されているのかを調べたい事があると思います。

例えば、お店やイベント会場などで再生リストをプレイしながら動画に合わせた情報を表示したい場合などです。色々な方法があると思いますが、Youtubeのiframe内のURLを取得する方法として本記事を参考にしてもらえればと思います。

一般的には(特にモダンブラウザでは)frameやiframe内に別ドメインのページを表示している場合、 親ページから子ページ(iframe内)のURLを取得することはできません。

■jQueryで別ドメインへの参照を行った場合のエラー

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://yourdomain.com" from accessing a cross-origin frame

これは、Same-Origin Policyのセキュリティ制限によるもので、実際に参照すると上記のようなブラウザのエラーを確認できると思いますが、iframe内の子ページ側で関数を用意してあげれば可能になり、YouTubeのAPIでは専用の関数(メソッド)が用意されています。

■主なポイント

  • YouTube IFrame APIを使ってYT.PlayerオブジェクトのgetVideoUrl()メソッドを使って、対象のプレーヤーで動画のURLを取得する

下記の34行目に作成した再生リストのID(再生リストを再生した際のURLクエリ内にある”list=”の値)を書き換えるだけで、動作するサンプルです。

再生を続けてリストの次の動画が再生されると、URLや動画ID欄も更新されるのを確認してください。

この動画IDをもとに、動画に関する情報や紐付けた情報を表示する事ができます。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存