teratail
回答率
85.48%
質問するログイン新規登録
トップHTML5に関する質問ミュートの状態になるようにランディングページにYouTubeを埋め込んだのですが、音が消えません。

編集履歴

回答編集履歴

1

追記・解説・関連リンク・コード

2017/08/04 07:55

投稿

coba-coba
coba-coba

スコア1409

test CHANGED
@@ -7,3 +7,245 @@
7
7
  IFrame Player APIの方（script.jsの方）では、```function onPlayerReady2```にも```event.target.mute();```を書いてください。
8
8
 
9
9
  これでは、```onPlayerReady```を呼び出しているplayerDはミュートになりますが、```onPlayerReady2```を呼び出しているplayersの4つはミュートになりません。
10
+
11
+
12
+
13
+ 追記
14
+
15
+ ---
16
+
17
+ 最初は「syuuphxさんのコードがそのまま動くので、それを参考にしてください」と書こうと思ったのですが、いろいろあって私も書いてみました。（特にEdgeで動かないという問題が……）
18
+
19
+
20
+
21
+ akkkkinさんの要望を実現するコードを回答の最下部に載せました。
22
+
23
+ コピペで動きます。公式のコードをひな形に利用しています。
24
+
25
+ 最新のEdge・Chrome・Firefox・Operaのみ確認しています。
26
+
27
+ なお、iPhoneやAndroidでは```playVideo()```が使えず、希望通りには動きません。
28
+
29
+
30
+
31
+ 以下、自分用のメモも兼ねて、少し解説させていただきます。
32
+
33
+ 意味がよく分からないと思いますが、ご容赦ください…。
34
+
35
+
36
+
37
+ 解説
38
+
39
+ ---
40
+
41
+ 先に次の点を頭に入れておいてから、この先を読み進めてください。
42
+
43
+ - 動画の指定方法は```videoId```で1つ指定する方法と、```playlist```で1つ以上指定できる方法がある
44
+
45
+ - ```playerVars```ではプレイヤーのオプションや```playlist```の指定ができる
46
+
47
+
48
+
49
+ 最初は「syuuphxさんのコードがそのまま動くので、それを参考にしてください」と書こうと思ったら、Edgeで動きませんでした。
50
+
51
+ というか公式の例をコピペしても、Edgeで動きませんでした……。
52
+
53
+
54
+
55
+ それで調べていくうちに、一筋縄ではいかないことが分かりました。
56
+
57
+
58
+
59
+ Edgeでの問題点・謎な点は、次のとおりです。
60
+
61
+
62
+
63
+ - Edgeでは```onReady```や```onStateChange```などのイベントが発火しない
64
+
65
+ - Edgeで動画の自動再生とループを同時に実現するには、```videoId```で動画を指定して、```playlist```でも動画を指定する必要がある
66
+
67
+ - なぜか```playerVars```では、Edgeのみがオプションを指定できる。しかも、なぜかマニュアルに書いていない```mute```パラメーターが使えた
68
+
69
+
70
+
71
+ 更に、Chrome・Firefox・Operaでも以下のような少し面倒なことがありました。
72
+
73
+
74
+
75
+ - 自動再生をするには```player.playVideo()```を実行する必要がある（これ単体では問題なし）
76
+
77
+ - しかし、```videoId```のみで動画を指定する場合は問題なく動くが、```playlist```のみを再生する場合には```playlist```を用意するのに時間がかかるため、```playlist```の準備が完了するのを待ってから```player.playVideo()```を実行しなければならない。
78
+
79
+ - そして、動画のループをするには```playlist```を用意する必要がある。
80
+
81
+
82
+
83
+ これらを解決する方法は次のとおりです。
84
+
85
+ - Edge用に```playerVars```でオプションを指定する
86
+
87
+ - ```videoId```と```playlist```の両方で動画を指定する。（同じ動画を2つ用意することになる。）
88
+
89
+
90
+
91
+ 関連
92
+
93
+ ---
94
+
95
+ - [iframe 組み込みの YouTube Player API リファレンス](https://developers.google.com/youtube/iframe_api_reference?hl=ja#playVideoAt)
96
+
97
+ - [YouTube 埋め込みプレーヤーとプレーヤーのパラメータ ](https://developers.google.com/youtube/player_parameters?hl=ja#loop)
98
+
99
+ - [AutoPlay Not working properly](https://github.com/youtube/youtube-ios-player-helper/issues/67)
100
+
101
+ - [YouTube player iframe API: playVideo doesn't work on Firefox 9.0.1](https://stackoverflow.com/questions/9287170/youtube-player-iframe-api-playvideo-doesnt-work-on-firefox-9-0-1)
102
+
103
+ - [Youtube iframe api not playing video on Edge / IE](https://stackoverflow.com/questions/41658448/youtube-iframe-api-not-playing-video-on-edge-ie)
104
+
105
+
106
+
107
+ コード
108
+
109
+ ---
110
+
111
+ akkkkinさんの要望
112
+
113
+
114
+
115
+ > ランディングページを表示させた際、youtubeがオートで再生され、音はミュートの状態にしたく思っています。
116
+
117
+ > １ページ上で再生させたい動画数は１つ、ミュートでループ再生を行いたいです。
118
+
119
+
120
+
121
+ 最新のEdge・Chrome・Firefox・Operaのみ確認しています。
122
+
123
+ iPhoneやAndroidでは```playVideo()```が使えず、希望通りには動きません。
124
+
125
+
126
+
127
+ ```HTML
128
+
129
+ <!DOCTYPE html>
130
+
131
+ <html>
132
+
133
+ <head>
134
+
135
+ <meta charset="utf-8"/>
136
+
137
+ </head>
138
+
139
+ <body>
140
+
141
+ <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
142
+
143
+ <div id="player"></div>
144
+
145
+
146
+
147
+ <script>
148
+
149
+ // 2. This code loads the IFrame Player API code asynchronously.
150
+
151
+ var tag = document.createElement('script');
152
+
153
+
154
+
155
+ tag.src = "https://www.youtube.com/iframe_api";
156
+
157
+ var firstScriptTag = document.getElementsByTagName('script')[0];
158
+
159
+ firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
160
+
161
+
162
+
163
+ // 3. This function creates an <iframe> (and YouTube player)
164
+
165
+ // after the API code downloads.
166
+
167
+ var player;
168
+
169
+
170
+
171
+ // 動画のID
172
+
173
+ const videoId = 'M7lc1UVf-VE';
174
+
175
+
176
+
177
+ function onYouTubeIframeAPIReady() {
178
+
179
+ player = new YT.Player('player', {
180
+
181
+ height: '360',
182
+
183
+ width: '640',
184
+
185
+ playerVars: {
186
+
187
+ playlist: videoId,
188
+
189
+ // 以下のオプションはChrome・Firefox・Operaでは使えないが、なぜかEdgeでは使える
190
+
191
+ autoplay: 1,
192
+
193
+ mute: 1,
194
+
195
+ loop: 1
196
+
197
+ },
198
+
199
+ videoId: videoId,
200
+
201
+ // イベントがEdgeで発火しない・・・？
202
+
203
+ events: {
204
+
205
+ 'onReady': onPlayerReady,
206
+
207
+ 'onStateChange': onPlayerStateChange
208
+
209
+ }
210
+
211
+ });
212
+
213
+ }
214
+
215
+
216
+
217
+ // 4. The API will call this function when the video player is ready.
218
+
219
+ // ↑ 実際はプレイリストを読み込む場合は準備できていない。少し待たないといけない。
220
+
221
+ function onPlayerReady(event) {
222
+
223
+ event.target.mute(); // ミュート
224
+
225
+ event.target.setLoop(true); // ループ
226
+
227
+ event.target.playVideo(); // 動画の開始
228
+
229
+ }
230
+
231
+
232
+
233
+ // 5. The API calls this function when the player's state changes.
234
+
235
+ // The function indicates that when playing a video (state=1),
236
+
237
+ // the player should play for six seconds and then stop.
238
+
239
+ function onPlayerStateChange(event) {
240
+
241
+ }
242
+
243
+ </script>
244
+
245
+ </body>
246
+
247
+ </html>
248
+
249
+ ```
250
+
251
+