みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

YouTube Player API を つかってみよう。

先日、YouTube Player API をつかってサイトにYouTubeプレイヤーを設置する機会があったので、忘れないうちにまとめておこうと思います。

公式のAPIドキュメントは こちら にまとまっています。

プレイヤーの表示

まずは単純にプレイヤーを表示してみます。


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>YouTube Player API テスト</title>
    </head>
    <body>
        <!--プレイヤーに置換するタグを設置-->
        <div id="player"></div>

        <script>
            // プレイヤーインスタンス収納用変数
            var player;

            // iframeAPIの準備ができたときに実行されるコールバック関数
            function onYouTubeIframeAPIReady() {
                // プレイヤーインスタンスの作成
                player = new YT.Player("player", {
                    width   : "320",         // プレイヤーの幅
                    height  : "195",         // プレイヤーの高さ
                    videoId : "1g0ebPju_eE"  // 再生するビデオのID
                });
            }
        </script>

        <!--iframeAPIを読み込み-->
        <script src="https://www.youtube.com/iframe_api">
    </body>
</html>

自動再生

つぎに自動再生機能をいれてみます。
自動再生は、onReadyにコールバック関数を登録することで実装します。
ただしiOSではユーザー操作きっかけでしかストリーミングを開始できないので再生されません。


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>YouTube Player API テスト</title>
    </head>
    <body>
        <div id="player"></div>

        <script>
            var player;

            function onYouTubeIframeAPIReady() {
                player = new YT.Player("player", {
                    width   : "320", 
                    height  : "195", 
                    videoId : "1g0ebPju_eE",
                    events  : {
                        // プレイヤーの準備ができたときに実行されるコールバック関数
                        "onReady" : onPlayerReady
                    }
                });
            }

            // プレイヤーの準備ができたときに実行されるコールバック関数
            function onPlayerReady() {
                // プレイヤーを再生
                player.playVideo();
            }

        </script>
        <!--iframeAPIを読み込み-->
        <script src="https://www.youtube.com/iframe_api">
    </body>
</html>

いかがでしょうか。非常にお手軽です。
今回は初歩の初歩でしたが、まだまだ便利な機能が多々ありますので、
またの機会にひきつづき紹介していきたいと思います。