2018年12月20日木曜日

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

同一ページ内でYouTubeを複数設置したときに、同時再生をさせないようにする | cly7796.net
http://cly7796.net/wp/javascript/it-is-not-the-simultaneous-playback-of-youtube/

HTML

1
2
3
4
<div id="player01"></div>
<div id="player02"></div>
<div id="player03"></div>
<div id="player04"></div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// プレーヤーのサイズを指定
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');
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;
    }
}

 


0 件のコメント:

コメントを投稿