隠居のパソコン備忘録：Youtubeをページ内で再生させるYouTube Player API を試してみる

　9月の終わりにあった和泉の国ジャズストリートで録画した Videoをブログにアップした。その時、ブログのページ内で再生できるようにしたかったが、方法が見つからず、YouTube にリンクするしかなかった。YouTube の画面はかなり noisy である。

　最近、ひょんなことで、ブログのページ内で録画を YouTube の機能を使って再生できることが分かった。私的な旅行地図などを作るときに使っている Google Maps API（Application Program Interface) と同じように、Javascript を使う。Codeを自ら作り出す能力はないから、他人様のコードのパクリである。Javascript だから少しぐらいは自分で改訂することが出来る。
　今回は、YoheiM.net のYoutubeをサイト内で再生させるYoutube APIの使い方を参考にさせていただいた。

YouTube Player API で表示する動画

　上の YouTube 埋め込みプレーヤは、次のような Javascript コードで実現している。
　青太字部分は、YouTube に登録されたファイル名である。


<div id="player"></div>
<script>

    var tag = document.createElement('script');
   tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

   var player;
   function onYouTubeIframeAPIReady() {

  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'rL--g6q7zu4',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
}


function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
    alert('finish');
  }
}
</script>

追記（2015/10/26)：　Youtube の　Webページヘ内で再生させるのに、上のコードでは、Internet Explorer　では表示されないことが、最近になって分かった。現在では　Yutube が　iframe を使ったコードを提供しており、更に便利にWebページ内に埋め込むことが可能になっている。方法など詳細については、別に記録したいと思う。
　現在は、新しい埋め込みコードで、表示している。

隠居のパソコン備忘録：Youtubeをページ内で再生させるYouTube Player API を試してみる

タグ:

トラックバック

コメントする