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

ブログ [果報は寝て待て]|Blog

RSS

shape DESIGN 的開発環境

2021年3月27日 01:19

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

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

https://github.com/nekoyuu/vagrant

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 キーも必要なのでデベロッパーコンソールから設定が必要)も併せて使っていて、まず先にコンプライアンスレビューの実施メールが送られてきていました(利用状況を送ってください…的な内容)。

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

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

JavaScript でカレンダーを自動生成できるようにしてみる

2019年12月3日 19:44

 

ラジオボタンでスイッチコンポーネントを作ってみる

2019年2月14日 20:16

説明は後日書こうと思います。

div タグだけで table タグっぽいことをしてみる

2019年2月6日 22:49

説明は後日書こうと思います。

≪ 前へ 1 2 3 4 5 ... 9 次へ ≫ (41件中 1 - 5件を表示)

shape DESIGN - シェイプデザイン, 徳島県徳島市名東町, tel/fax 088-635-5859, 営業時間 平日10:00〜18:00

まずはお気軽にお問い合わせください
お問い合わせ・お見積り・ご相談はこちら
お気軽にご相談ください

徳島県徳島市名東町
tel/fax 088-635-5859
営業時間 平日 10:00〜18:00

※打ち合わせ等で不在の場合は、お電話でのお問い合わせに対応できない場合がありますので、ご了承ください。

フォームからのお問い合わせ

徳島・香川・愛媛・高知および大阪・京都を中心にご依頼を承ります。その他の地域でも、メール・お電話・FAX・Skype等での作業が可能であれば柔軟に対応いたします。

  • Become our fan on Facebook, facebook.com/shape.design