IFrame Player APIの関数を利用する（動画情報の取得：getDuration / getVideoUrl / getVideoEmbedCode）

その他

IFrame Player APIの関数を利用する（動画情報の取得：getDuration / getVideoUrl / getVideoEmbedCode）

CGI'sトップページ > Youtube API メモ > IFrame Player APIの関数を利用する（動画情報の取得：getDuration / getVideoUrl / getVideoEmbedCode）

IFrame Player APIの関数を利用する（動画情報の取得：getDuration / getVideoUrl / getVideoEmbedCode）

関数名	機能概要/構文/パラメータ
getDuration getVideoUrl getVideoEmbedCode	動画の長さ動画のURI 動画の埋め込みコード
	player.getDuration():Number player.getVideoUrl():String player.getVideoEmbedCode():String

以下のサンプルでは onReadyイベント内で getDuration, getVideoUrl, getVideoEmbedCode を利用し、それぞれ、duration, uri, code というIDを持つHTML要素に表示しています。

サンプルコード

<div id="ytplayer"></div>
<script>
    // API読み込み
    script = document.createElement( 'script' );
    script.src = "//www.youtube.com/iframe_api";
    firstScript = document.getElementsByTagName( 'script' )[ 0 ];
    firstScript.parentNode.insertBefore( script , firstScript );
    
    // 動画呼び出し
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('ytplayer', {
          height: '285',
          width: '480',
          events: {
              'onReady': onPlayerReady,
          },
          videoId: 'bHQqvYy5KYo'
      });
    }
    
    // onReadyのコールバック関数
    function onPlayerReady(event) {
        document.getElementById('duration').innerHTML = player.getDuration() + '秒';
        document.getElementById('uri').innerHTML = player.getVideoUrl();
        document.getElementById('code').innerHTML = escapeHTML(player.getVideoEmbedCode());
    }
    function escapeHTML(html) {
      var elem = document.createElement('div');
      elem.appendChild(document.createTextNode(html));
      return elem.innerHTML;
    }
</script>

サンプル

■動画の長さ

■動画のURI

■動画の埋め込みコード

Youtube API メモ Indexへ戻る