ど素人から毛を生やす。<延>

YouTube Player APIで動画を複数表示

Web > javascript 2014年3月7日(最終更新:3年前)

このページは2014.3.7に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
職場の乾燥具合に驚いた餅。です。

まぁ一日中パソコン起動させてるような職場ですし、湿度高くても問題そうですが…

さて、今回はYouTube Player APIについて。

先日、サイトにyoutube動画を貼り付けるという依頼がありました。
その際の条件は「関連動画は表示しない」というものだけだったので、

<iframe width="xxx" height="yyy" src="//www.youtube.com/embed/動画ID?rel=0&showinfo=0&autohide=1" frameborder="0" allowfullscreen></iframe>

という方法で導入しました。

が、
今回、「音量は初期ミュートで」と言われてしまいまして、しかし最もシンプルなこの貼り付け方では初期ミュートは対応できないそうです。

さて困った、と思っていましたら、ちゃーんと公式サポートがあるんですね。YouTube Player APIというjsを積めば複雑な注文にも対応してくれるとのことでした。
使い方としましては、こちらのサイト様が良い感じに日本語訳してくれているので参考にするのが良いかと。

但し、例文をコピペしただけだと、1ページに複数の動画を置いてくれません。

ので、やり方を変更です。

まずはヘッドにjsを読み込みます。

<script src="https://www.youtube.com/iframe_api"></script>

で、次はjsのユーザー記載部を編集するのですが…

<script>
var 動画1(任意半角名称)
var 動画2(任意半角名称)
var 動画3(任意半角名称)
        function onYouTubeIframeAPIReady() {
            動画1(任意半角名称) = new YT.Player('動画1(任意半角名称)', {
                height: '315',
                width: '560',
                videoId: '動画1のID',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                },
                                playerVars: {
                                    "rel":0,            // 関連動画の有無(default:1)
                                }
            });
            動画2(任意半角名称) = new YT.Player('動画2(任意半角名称)', {
                height: '315',
                width: '560',
                videoId: '動画2のID',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                },
                                playerVars: {
                                    "rel":0,            // 関連動画の有無(default:1)
                                }
            });
            動画3(任意半角名称) = new YT.Player('動画3(任意半角名称)', {
                height: '315',
                width: '560',
                videoId: '動画3のID',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                },
                                playerVars: {
                                    "rel":0,            // 関連動画の有無(default:1)
                                }
            });

        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            event.target.mute();
        }

        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        var done = false;
        function onPlayerStateChange(event) {
//            if (event.data == YT.PlayerState.PLAYING && !done) {
//                setTimeout(stopVideo, 6000);
//                done = true;
//            }
        }
        function stopVideo() {
            player.stopVideo();
        }
</script>

ポイントは、function onYouTubeIframeAPIReady()の中に読み込む動画全ての情報を記載することです。

複数function onYouTubeIframeAPIReady()を立ち上げるとバグるので注意です。

これで、動画を貼り付けする部分に

<div id="動画1(任意半角名称)"></div>

などとそれぞれ記載すれば完了です。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)