徳島ホームページ制作・PHPシステム開発：shape DESIGN - シェイプデザイン

ホーム > ブログ [果報は寝て待て]

RSS

shape DESIGN 的開発環境

2021年3月27日 01:19

vagrant + virtualbox のいつも使っている LAMP 環境を github にアップしてみました。
誰かの助力になれば幸いです！

全力で shell なんで Chef とか Docker じゃないんかい！とかいうツッコミはなしでお願いしますね〜（笑

https://github.com/nekoyuu/vagrant

Category: 雑記 / Parmalink / Comments()

YouTube IFrame Player API って同時再生禁止なのね…

2020年9月12日 13:05

久しぶりに真面目にアウトプット。
今回は YouTube IFrame Player API のお話です。

https://developers.google.com/youtube/iframe_api_reference?hl=ja

通常 YouTube の動画って共有の埋め込みから iframe タグを取得して HTML に貼り付けるわけですが、動画の状態を監視してあれこれ操作を行う時に YouTube IFrame Player API を使うのですが…。

少し前に YouTube IFrame Player API を使用しているサイトで規約違反してますよーってメールが突然きまして…。
英文メールだし怪しいことこの上ないな…迷惑メールボックス行きか？…とも思ったのだけど、念の為あれこれ調べてみたところどうやらガチのお話だったようで（汗

https://developers.google.com/youtube/terms/required-minimum-functionality
「Autoplay and scripted playbacks」のセクションにしっかり書かれてますね。

メール内容の抜粋はこんな。

C (Implementing YouTube Features)
Policy #: III.C 1
• Violation: API Client is not adhering to YouTube’s RMF features.
• Multiple videos are playing at the same time in the website.

Proposed Solution: Please make the necessary changes so that a page or screen must not have more than one YouTube player that plays content simultaneously.

なんでも「3 営業日以内にどーにかしてね！」ってことだったので、慌てて対応しましたとさ。
※これって普通に貼り付けだけのプレーヤーは対象じゃないのかな…（よくわからない・汗）

まず、HTML はこんな感じで書かれていて、iframe の id 属性値で対象のプレーヤを操作するわけです。
実際は PHP でループさせて li タグは吐いてますが。

<ul>
    <li><iframe id="youtube-player-1" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen uk-responsive></iframe></li>
    <li><iframe id="youtube-player-2" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen uk-responsive></iframe></li>
    <li><iframe id="youtube-player-3" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen uk-responsive></iframe></li>
    <li><iframe id="youtube-player-4" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen uk-responsive></iframe></li>
</ul>

上記の HTML （プレーヤー）に対してリファレンスを参考にしつつ、同時に再生されないように javascript を書いていきます。

// YouTube IFrame Player API の読み込みタグを追加する
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 movies = [
    {"player":"youtube-player-1"},
    {"player":"youtube-player-2"},
    {"player":"youtube-player-3"},
    {"player":"youtube-player-4"}
];
 
var players = [];
var playingIndex = stopIndex = playIndex = null;
 
function onYouTubeIframeAPIReady() {
    // 各プレーヤーのインスタンスを生成して配列に突っ込む
    for (var i = 0; i < movies.length; i++) {
        players[i] = new YT.Player(movies[i]['player'], {
            events: {
                'onStateChange': onPlayerStateChange
            }
        });
    }
}
 
function onPlayerStateChange(event) {
    for (var i = 0; i < movies.length; i++) {
        // 各プレーヤーの状態を取得
        var state = players[i].getPlayerState();
 
        // 初期表示で再生された場合
        if (state === YT.PlayerState.PLAYING &amp;&amp; playingIndex === null) {
            playingIndex = i;
 
        // 他のプレーヤーが再生中でそのプレーヤー以外が再生された場合
        } else if ((state === YT.PlayerState.BUFFERING || state === YT.PlayerState.PLAYING) &amp;&amp; playingIndex !== i) {
            stopIndex = playingIndex;
            playIndex = i;
        }
    }
 
    // 再生中だったプレーヤーを一時停止する
    if (stopIndex !== null) {
        players[stopIndex].pauseVideo();
        stopIndex = null;
    }
 
    // 再生されたプレーヤーを記憶する
    if (playIndex !== null) {
        playingIndex = playIndex;
        playIndex = null;
    }
}

これで同時再生されなくなりました。
めでたし、めでたし。

ちなみに、YouTube の利用規約もリンクを貼るなりして利用していることを明示しないといけないらしいですよ。
外部サービスを使うのにもきちんと調べて正しく利用しないとですね（自戒）。

※コードは実際のものから少々変更しているので、動作の保証はありません。

[2020年9月13日追記]
おそらくの話で確実性があるかどうかは不明なのであれですが、上記のサイトでは YouTube Data API （こちらは API キーも必要なのでデベロッパーコンソールから設定が必要）も併せて使っていて、まず先にコンプライアンスレビューの実施メールが送られてきていました（利用状況を送ってください…的な内容）。

同時再生が規約違反なのは事実なので修正は必須だったと思いますが、鑑みるに、それがなければ同様の実装をしていてもこの投稿で書いたような内容のメールは届かなかったのではないかと推測。
利用状況を精査した上で、規約違反してますよーって連絡が来たのではないかと。

ただ、同時再生の禁止事項が通常の貼り付けプレーヤーにも該当するかは未だ不明なのですが…もやもやする（汗