Web Tips Plus: Youtube プレーヤーAPI 同時再生させないようにする

2018年12月20日木曜日

同一ページ内でYouTubeを複数設置したときに、同時再生をさせないようにする | cly7796.net

1

2

3

4

<div id="player01"></div>

<div id="player02"></div>

<div id="player03"></div>

<div id="player04"></div>

// プレーヤーのサイズを指定

var ytWidth = 640;

var ytHeight = 390;

// 埋め込むyoutubeのIDと埋め込むエリアを指定

var ytData = [

{

        id: 'S_ucMS7sxx8',

        area: 'player01'

    }, {

        id: 'aIRAOr8WbXY',

        area: 'player02'

    }, {

        id: 'RLZez82cp4w',

        area: 'player03'

    }, {

        id: 'ZZ2IkhhXAEo',

        area: 'player04'

}

];

var ytPlayer = [];

var ytPlaying, ytStop, ytPlay;

// YouTube 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);

// API読み込み後に、各エリアにプレーヤーを埋め込む

function onYouTubeIframeAPIReady() {

    for(var i = 0; i < ytData.length; i++) {

        ytPlayer[i] = new YT.Player(ytData[i]['area'], {

            height: ytHeight,

            width: ytWidth,

            videoId: ytData[i]['id'],

            events: {

                'onStateChange': onPlayerStateChange

}

});

}

}

// プレーヤーの状態に変化があった時に実行

function onPlayerStateChange(event) {

    // 各プレーヤーの状態を確認

    for(var i = 0; i < ytData.length; i++) {

        var thisState = ytPlayer[i].getPlayerState();

        if( thisState == 1 && ytPlaying == undefined) {

            ytPlaying = i;

        } else if(thisState == 1 && ytPlaying != i) {

            ytStop = ytPlaying;

            ytPlay = i;

        } else {

}

}

    // 同時再生があった場合、元々再生していた方を停止する

    if(ytStop != undefined) {

        ytPlayer[ytStop].pauseVideo();

        ytStop = undefined;

}

    // 現在再生中のプレーヤー番号を保存しておく

    if(ytPlay != undefined) {

        ytPlaying = ytPlay;

        ytPlay = undefined;

}

}

Web Tips Plus