Posted by 山崎富美 / Developer Relations Team

[本記事は、YouTube API blog に投稿された Introducing JavaScript Player API for iframe embeds というポストを元に developer advocate の北村英志が翻訳したものです。- 山崎]

iPhone や iPad 向けに YouTube を埋め込み表示したいと考えるウェブサイト製作者の方は少なくないと思います。昨年 7 月に発表された YouTube Player の iframe 埋め込み方式対応により、閲覧者の環境に応じて Flash 版と HTML5 版を自動的に選択して表示することが可能になったのはご存知でしょうか？

本日より、この iframe 埋め込み方式を YouTube のデフォルト埋め込み形式とし、これまで行えなかった JavaScript による Player 制御用 API のベータ版が利用可能になったことをお知らせします。API の利用例は下記を御覧ください。

<!DOCTYPE HTML>
<html>
<body>
<div id="player"></div>
<script>
    //Load player api asynchronously.
    var tag = document.createElement('script');
    tag.src = "http://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    var done = false;
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'JW5meKfy3fY',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(evt) {
        evt.target.playVideo();
    }
    function onPlayerStateChange(evt) {
        if (evt.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }
    }
    function stopVideo() {
        player.stopVideo();
    }
</script>
</body>
</html>

このサンプルコードでは、数秒間動画を再生し、その後停止します。プレイヤーの制御には、 http://www.youtube.com/player_api から読み込まれたスクリプトにより定義される YT.Player のインスタンスが用いられます。より詳細な API の利用方法については Player API ドキュメントを御覧ください。また、ご質問がありましたら、Developer Forum までお問い合わせください。