Youtube動画のメタ情報をoEmbedで取得【PHP・JavaScript】

Youtube動画のメタ情報とはこういうもの

タイトル・説明だったり、
サムネイル画像だったり、
作成者名だったり、

これはスクレイピングでも取得できます。
でも法的な問題もあるし、もっと便利な方法がありました。

それは oEmbed API から取得すること

oEmbed でのYouTube動画メタ情報の取得を、
PHP・JavaScriptでのコード例と一緒にまとめました。

このページの目次 [隠す]

oEmbed とは？埋め込みによく使われるアレ
oEmbed からコードなしで動画メタ情報を取得
PHP からYoutube動画のメタ情報を取得
JavaScript + Ajaxから動画のメタ情報を取得
- Ajax からなら noembed.com でメタ情報が取得できた
ここまでの oEmbed の使い方まとめ

oEmbed とは？埋め込みによく使われるアレ

oEmbedは Twitter とか YouTube とか、
そういうコンテンツサービスで良く見かけます。

ちなみに英Wikipediaだとこんな説明がされてました。

▼ oEmbedについてのWiki引用

oEmbed is an open format designed to allow embedding content from a website into another page. The specification was created by Cal Henderson, Leah Culver, Mike Malone, and Richard Crowley in 2008.[1] It has become an industry standard for embedding content, used by companies like Twitter to make tweets embeddable in blog posts[2] and by blogging platforms like Medium to allow content authors to include those snippets.[3]

引用元　：　https://en.wikipedia.org/wiki/OEmbed

▼ このWiki説明の超意訳

pEmbedはウェブサイト上のコンテンツを別ページに埋め込むための標準フォーマット。その仕様は2008年に作られた模様。今では埋め込みコンテンツの標準になってて、Twitterとかに企業にツイート埋め込みするのに利用されてたり、Medim(?)みたいなブログサービスとかで記事引用するのとかに使われてる。

縁の下の力持ちみたいな存在

身近に目にするのだと Twitter のタイムライン埋め込みとか、FaceBookの埋め込みとか、インスタグラム埋め込みかもしれません。

oEmbed からコードなしで動画メタ情報を取得

それでこの oEmebed 、実は Youtube にも対応してます。

利用すると動画についての色々な情報が取得できるんです。

動画タイトル
作者名
チャンネルURL
動画のサムネURL
動画の幅と高さ
その他いろいろ...

そこでまず、一切コードなしで oEmbed を使ってみます。

例えば、次のYouTube動画のメタ情報が知りたいとしましょう。

https://www.youtube.com/watch?v=ishrrz5VjHc

1	https://www.youtube.com/watch?v=ishrrz5VjHc

その場合は次のURLにアクセス

https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=8wmTilkK27o&format=json

1	https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=8wmTilkK27o&format=json

やり方としては url パラメーターに【動画URL】、
その次の format パラメーターに json とかの【データ形式】を渡すだけ。

ちなみに【データ形式】には xml または json のどちらかが指定可能

実際にはこういう感じでデータが返ってきます。

{"width": 480,"thumbnail_url": "https://i.ytimg.com/vi/8wmTilkK27o/hqdefault.jpg","thumbnail_height": 360,"author_url": "https://www.youtube.com/channel/UCcVEgDxVCd80zVv_o3eTkVw","html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/8wmTilkK27o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>","height": 270,"author_name": "Beautiful Relaxing Music","provider_url": "https://www.youtube.com/","version": "1.0","title": "スタジオジブリリラックスした音楽 - 最高のスタジオジブリサウンドトラック - 最高のスタジオジブリリラックスした音楽null","provider_name": "YouTube","type": "video","thumbnail_width": 480}

{"width": 480,"thumbnail_url": "https://i.ytimg.com/vi/8wmTilkK27o/hqdefault.jpg","thumbnail_height": 360,"author_url": "https://www.youtube.com/channel/UCcVEgDxVCd80zVv_o3eTkVw","html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/8wmTilkK27o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>","height": 270,"author_name": "Beautiful Relaxing Music","provider_url": "https://www.youtube.com/","version": "1.0","title": "スタジオジブリリラックスした音楽 - 最高のスタジオジブリサウンドトラック - 最高のスタジオジブリリラックスした音楽null","provider_name": "YouTube","type": "video","thumbnail_width": 480}

いわゆる REST API です。

今回はこの oEmbed をPHP・JavaScriptからコード的に呼出し、Youtube動画のメタ情報を取得してみることにしました。

PHP からYoutube動画のメタ情報を取得

まずは oEmbed をPHPから呼び出す方法。

これには curl を使うのが手っ取り早いですね。

具体的なコード例を出すなら、次の通り

▼ 動画ID ishrrz5VjHc のメタ情報取得＆表示

/// 取得するYoutube動画ＩＤ
$video_id = 'ishrrz5VjHc';
/// Youtube動画のURL
$video_url = 'https://www.youtube.com/watch?v='.$video_id;

/// oEmebdからメタ情報取得して表示
$oembed_url = "https://www.youtube.com/oembed?url={$video_url}&format=json";
$ch = curl_init( $oembed_url );
curl_setopt_array( $ch, [
  CURLOPT_RETURNTRANSFER => 1
] );
$resp = curl_exec( $ch );

$metas = json_decode( $resp, true );

echo 'タイトル : '.$metas['title'].'<br>';
echo 'サムネURL : '.$metas['thumbnail_url'].'<br>';
echo '作者名 : '.$metas['author_name'].'<br>';
echo 'チャンネルURL : '.$metas['author_url'].'<br>';
echo '幅 : '.$metas['width'].'ピクセル, ';
echo '高さ : '.$metas['height'].'ピクセル';

/// 取得するYoutube動画ＩＤ

$video_id = 'ishrrz5VjHc';

/// Youtube動画のURL

$video_url = 'https://www.youtube.com/watch?v='.$video_id;

/// oEmebdからメタ情報取得して表示

$oembed_url = "https://www.youtube.com/oembed?url={$video_url}&format=json";

$ch = curl_init( $oembed_url );

curl_setopt_array( $ch, [

CURLOPT_RETURNTRANSFER => 1

] );

$resp = curl_exec( $ch );

$metas = json_decode( $resp, true );

echo 'タイトル : '.$metas['title'].'<br>';

echo 'サムネURL : '.$metas['thumbnail_url'].'<br>';

echo '作者名 : '.$metas['author_name'].'<br>';

echo 'チャンネルURL : '.$metas['author_url'].'<br>';

echo '幅 : '.$metas['width'].'ピクセル, ';

echo '高さ : '.$metas['height'].'ピクセル';

動画IDを置き換えれば、いくらでも好きな動画のメタ情報を調べ放題

しかも Youtube Data API と違って変な制限（クォータとかいう謎概念）もない。なので、気軽に使うことができて便利です。PHPに限らずどの言語でも使えます。

JavaScript + Ajaxから動画のメタ情報を取得

次は Ajax から oEmbed を呼び出し。

というか JavaScript （jQuery）を使ったやり方ですね。

これも問題なく呼び出せるかと思いきや・・・

※ あとから分かったけど、普通の方法では無理

まず初めに、こんなコードを書いてみました。（失敗）

▼ 実際に書いてみたコード例

var videoId = 'ishrrz5VjHc';
var videoUrl = 'https://www.youtube.com/watch?v='+videoId;
var oembedUrl = 'http://www.youtube.com/oembed?url='+videoUrl+'&format=json&callback=callback';
$.ajax({
  url: oembedUrl,
  type: 'GET',
  dataType: 'jsonp',
  jsonpCallback: 'callback',
  success: function(resp){
    console.log('response : ', resp);
  },
  error: function(data) {
    console.error('error occured');
  }
});

var videoId = 'ishrrz5VjHc';

var videoUrl = 'https://www.youtube.com/watch?v='+videoId;

var oembedUrl = 'http://www.youtube.com/oembed?url='+videoUrl+'&format=json&callback=callback';

$.ajax({

url: oembedUrl,

type: 'GET',

dataType: 'jsonp',

jsonpCallback: 'callback',

success: function(resp){

console.log('response : ', resp);

error: function(data) {

console.error('error occured');

}

});

これでできるはず・・・と思いきや、なぜかできなかったです。

クロスドメイン対策で dataType: 'jsonp' も指定したのに (-_-)

この原因については良く分かりません。

もし詳しい人がいれば、コメント欄とかでやり方教えてください。

Ajax からなら noembed.com でメタ情報が取得できた

というかそもそも、 jsonpCallback が指定できないようです。

▼ jsonpとjsonpCallbackについて

PisukeCode - Web開発まとめ

Ajaxにおける jsonp、jsonpCallback 使い方まとめ

https://pisuke-code.com/jquery-ajax-usage-of-jsonpcallback

jQueryのAjaxから外部APIを呼び出したとき。なぜかこんなエラーが発生・・・Access to XMLHttpRequest at 'http://express.heartrails.com/api/json?method=getStations&x=139.76608399999998&y=35.681382' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.CORSエラーが出てしまい、APIからJSONが返ってきません。この解決方法が jsonp を使うことここでは具体的な事例も交え、jQueryのAjaxから jsonp を...

上記事みたいな指定、そもそもできないんですよね。

あとYoutube Oembed のマニュアルとかもない模様

でも noembed.com というサービスで代替できるみたいです。

たとえばコード例を示すと、こんなコード

▼ ビデオID ishrrz5VjHc のメタ情報取得

var videoId = 'ishrrz5VjHc';
var videoUrl = 'https://www.youtube.com/watch?v='+videoId;
var oembedUrl = 'https://noembed.com/embed?url='+videoUrl;
jQuery.ajax({
  url: oembedUrl,
  type: 'GET',
  dataType: 'json',
  success: function(resp){
    console.log('response : ', resp);
  },
  error: function(data) {
    console.error('error occured');
  }
});

var videoId = 'ishrrz5VjHc';

var videoUrl = 'https://www.youtube.com/watch?v='+videoId;

var oembedUrl = 'https://noembed.com/embed?url='+videoUrl;

jQuery.ajax({

url: oembedUrl,

type: 'GET',

dataType: 'json',

success: function(resp){

console.log('response : ', resp);

error: function(data) {

console.error('error occured');

}

});

▼ このコードの出力結果（一部）

{html: "?<iframe width=" 480" height="270" src="https://ww…="0" allowfullscreen="allowfullscreen"></iframe>?", version: "1.0", height: 270, thumbnail_url: ... , width: 480, thumbnail_height: 360, provider_url: "https://www.youtube.com/", type: "video", author_url: ... }

1	{html: "?<iframe width=" 480" height="270" src="https://ww…="0" allowfullscreen="allowfullscreen"></iframe>?", version: "1.0", height: 270, thumbnail_url: ... , width: 480, thumbnail_height: 360, provider_url: "https://www.youtube.com/", type: "video", author_url: ... }

今度はCORSエラーも出ませんでした。

あと jsonp とかも指定不要なので便利かもです。

ここまでの oEmbed の使い方まとめ

ということで、YouTubeメタ情報の取得方法のまとめ

コードなしで oEmbed 呼び出し
公式の https://www.youtube.com/oembed? に必要なパラメーターを渡せば、JSONまたはXML形式でメタ情報が返ってくる。
PHPを使って oEmbed 呼び出し
おなじみの curl を使うのが手っ取り早い。ただし返ってくるのは文字列なので json_decode( $resp, true ) のようにデコードする必要あり。
JavaScript + Ajax から oEmebed 呼び出し
これは普通に Ajax を使ってもエラーが出てしまって取得できない。代わりに noembed.com というサービスを使うと取得できた。