YouTube iFrame Player APIを使って複数の動画を埋め込みつつ、更新時に変更するファイルをHTMLのみにしたい。

実現したいこと

YouTube iFrame Player APIを使って複数のidセレクタに動画を埋め込む
更新時に変更しなくてはならないファイルの数を減らす
それぞれのiframeに埋め込んだ動画のシークバーを動かすボタンをそれぞれのidセレクタに配置する予定

質問

こちらのサイトを参考に、複数のYouTube動画を埋め込んだサイトを作っています。
こちらのコードで一応問題なく動いているのでこのままでも良いのですが、コンテンツを更新する際にHTMLとJavaScriptの両方を変更しなくてはならないため、HTMLの変更だけで済むように改善したいと考えています。
jQueryの.each()を使えば良いかなと思ったのですがうまく動きません。
間違っているところ、またより良い書き方などありましたら教えていただきたいです。

変更前のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
6    <script src="iframe.js"></script>
7    <title>youtube player test</title>
8</head>
9<body>
10    <div id="sample01"></div>
11    <div id="sample02"></div>
12    <div id="sample03"></div>
13    <div id="sample04"></div>
14</body>
15</html>

JavaScript
1var tag = document.createElement('script');
2tag.src = "https://www.youtube.com/iframe_api";
3var firstScriptTag = document.getElementsByTagName('script')[0];
4firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
5 
6// 各プレーヤーの格納
7var ytPlayer = [];
8// プレーヤーのサイズ
9var ytWidth = 640;
10var ytHeight = 390;
11// 各動画情報
12var ytData = [
13    {
14        id: 'NcgBHHMbSGg',
15        area: 'sample01'
16    }, {
17        id: 'wbqOCoBkGvg',
18        area: 'sample02'
19    }, {
20        id: 'idIHKr4GvPY',
21        area: 'sample03'
22    }, {
23        id: 'ke8aMAvP7pk',
24        area: 'sample04'
25    }
26];
27 
28// 各プレーヤーの埋め込み
29function onYouTubeIframeAPIReady() {
30    for(var i = 0; i < ytData.length; i++) {
31        ytPlayer[i] = new YT.Player(ytData[i]['area'], {
32            width: ytWidth,
33            height: ytHeight,
34            videoId: ytData[i]['id'],
35            playerVars: {
36                rel: 0
37            },
38            events: {
39                'onReady': onPlayerReady
40            }
41        });
42    }
43}
44 
45// 各プレーヤー準備完了後の処理
46function onPlayerReady(e) {
47    for (var i = 0; i < ytData.length; i++) {
48        if(e.target.getIframe().id == ytData[i]['area']) {
49            console.log(ytData[i]['area'] + 'のプレーヤー準備完了しました。');
50        }
51    };
52}
53
54// ボタン作成用
55function myPlayVideo(num) {
56    ytPlayer[num].playVideo();
57}
58function myPauseVideo(num) {
59    ytPlayer[num].pauseVideo();
60}
61function mySeekTo(num, sec) {
62    ytPlayer[num].seekTo(sec,true);
63}

試したこと

前回の質問で.each()を知ったためそれを使ったコードにしてみましたがうまく動きませんでした。

　　後々わかりやすいかと思いidセレクタをdataに変更してます。

HTML
1<body>
2    <div data-archive="YouTube動画のid"></div>
3    <div data-archive="YouTube動画のid"></div>
4    <div data-archive="YouTube動画のid"></div>
5    <div data-archive="YouTube動画のid"></div>
6</body>

JavaScript
1
2var tag = document.createElement('script');
3tag.src = "https://www.youtube.com/iframe_api";
4var firstScriptTag = document.getElementsByTagName('script')[0];
5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
6
7var ytWidth = 640;
8var ytHeight = 390;
9
10$(function (){
11    $('[data-archive]').each(function(index, target) {
12        function onYouTubeIframeAPIReady() {
13            player = new YT.Player(target.dataset.archive, {
14                width: ytWidth,
15                height: ytHeight,
16                videoId: target.dataset.archive,
17                playerVars: {
18                    rel: 0
19                },
20                events: {
21                    'onReady': onPlayerReady
22                }
23
24            });
25        }
26    });
27});

違うだろうなと思いましたが念のため、.each()はfor文のような挙動をするようなのでonYouTubeIframeAPIReady()と位置を逆にしてみて、変更前にfor文があった位置に書いてみましたがそれもうまく動きませんでした。

JavaScript
1
2var tag = document.createElement('script');
3tag.src = "https://www.youtube.com/iframe_api";
4var firstScriptTag = document.getElementsByTagName('script')[0];
5firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
6
7var ytWidth = 640;
8var ytHeight = 390;
9
10$(function (){
11    $(function onYouTubeIframeAPIReady() {
12        $('[data-archive]').each(function(index, target) {
13            player = new YT.Player(target.dataset.archive, {
14                width: ytWidth,
15                height: ytHeight,
16                videoId: target.dataset.archive,
17                playerVars: {
18                    rel: 0
19                },
20                events: {
21                    'onReady': onPlayerReady
22                }
23
24            });
25        });
26    });
27});

Eggpan

2023/11/09 19:01

new YT.Playerの第一引数はdom要素またはhtmlのid要素のようなので、 new YT.Player(target, のようにする必要があるのでは無いかと思います。

行動規範の内容に同意します

回答2件

このAPIの仕様は知りませんが、とりあえずforを.each()で書き換えてみました。

JavaScript
1// 各プレーヤーの埋め込み
2function onYouTubeIframeAPIReady() {
3    $('[data-archive]').each(function(index, target) {
4        ytPlayer[index] = new YT.Player(target, {
5            width: ytWidth,
6            height: ytHeight,
7            videoId: target.dataset.archive,
8            playerVars: {
9                rel: 0
10            },
11            events: {
12                'onReady': onPlayerReady
13            }
14        });
15    });
16}
17 
18// 各プレーヤー準備完了後の処理
19function onPlayerReady(e) {
20    $('[data-archive]').each(function(index, target) {
21        if(e.target.getIframe() == target) {
22            console.log(target.dataset.archive + 'のプレーヤー準備完了しました。');
23        }
24    });
25}

とりあえず、同じように動いてるようなのでこれでいいのかなあ。
ちょっと自信はありません。
ボタン作成用の関数が何をしてるのか分からないのですが、ちゃんと動いてますか？

ただ、onPlayerReadyの処理ですが

JavaScript
1function onPlayerReady(e) {
2    console.log(e.target.getIframe().dataset.archive + 'のプレーヤー準備完了しました。');
3}

これだけでいいように思います。

投稿2023/11/10 19:26

CTRL-S

総合スコア176

urk_mofmof

2023/11/29 02:40

回答ありがとうございます。無事動かすことができました。ボタンもちゃんと動いています。現在はmySeekToという、指定したプレイヤーの再生位置を指定した秒数動かすボタンのみを使っています。

行動規範の内容に同意します

ベストアンサー

　Eggpan さんのコメントでのご指摘の他、onYouTubeIframeAPIReady()をハンドラの中に置いてしまうとスコープがハンドラの中になってしまうので、APIがonYouTubeIframeAPIReady()を見つけられない、という問題もあります。

　こうするとどうですか？

html
1<!doctype html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
7    <script>
8
9        var tag = document.createElement('script');
10        tag.src = "https://www.youtube.com/iframe_api";
11        var firstScriptTag = document.getElementsByTagName('script')[0];
12        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
13
14        var ytWidth = 640;
15        var ytHeight = 390;
16
17        function onYouTubeIframeAPIReady() {
18            $('[data-archive]').each(function (index, target) {
19                player = new YT.Player(target, {
20                    width: ytWidth,
21                    height: ytHeight,
22                    videoId: target.dataset.archive,
23                    playerVars: {
24                        rel: 0
25                    },
26                    // events: {
27                    //     'onReady': onPlayerReady
28                    // }
29
30                });
31            });
32        }
33    </script>
34    <title>youtube player test</title>
35</head>
36
37<body>
38    <div data-archive="NcgBHHMbSGg"></div>
39    <div data-archive="wbqOCoBkGvg"></div>
40    <div data-archive="idIHKr4GvPY"></div>
41    <div data-archive="ke8aMAvP7pk"></div>
42</body>
43
44</html>

投稿2023/11/10 05:57

Lhankor_Mhy

総合スコア36134

urk_mofmof

2023/11/29 02:42

回答ありがとうございます。 > onYouTubeIframeAPIReady()をハンドラの中に置いてしまうとスコープがハンドラの中になってしまうので、APIがonYouTubeIframeAPIReady()を見つけられないなるほど、そういうことでしたか。頂いたコードで無事に動かすことができました。ありがとうございました。

行動規範の内容に同意します

あなたの回答