回答編集履歴
1
追記・解説・関連リンク・コード
answer
CHANGED
|
@@ -2,4 +2,124 @@
|
|
|
2
2
|
[YouTube 埋め込みプレーヤーとプレーヤーのパラメータ](https://developers.google.com/youtube/player_parameters?hl=ja#Parameters)
|
|
3
3
|
|
|
4
4
|
IFrame Player APIの方（script.jsの方）では、```function onPlayerReady2```にも```event.target.mute();```を書いてください。
|
|
5
|
-
これでは、```onPlayerReady```を呼び出しているplayerDはミュートになりますが、```onPlayerReady2```を呼び出しているplayersの4つはミュートになりません。
|
|
5
|
+
これでは、```onPlayerReady```を呼び出しているplayerDはミュートになりますが、```onPlayerReady2```を呼び出しているplayersの4つはミュートになりません。
|
|
6
|
+
|
|
7
|
+
追記
|
|
8
|
+
---
|
|
9
|
+
最初は「syuuphxさんのコードがそのまま動くので、それを参考にしてください」と書こうと思ったのですが、いろいろあって私も書いてみました。（特にEdgeで動かないという問題が……）
|
|
10
|
+
|
|
11
|
+
akkkkinさんの要望を実現するコードを回答の最下部に載せました。
|
|
12
|
+
コピペで動きます。公式のコードをひな形に利用しています。
|
|
13
|
+
最新のEdge・Chrome・Firefox・Operaのみ確認しています。
|
|
14
|
+
なお、iPhoneやAndroidでは```playVideo()```が使えず、希望通りには動きません。
|
|
15
|
+
|
|
16
|
+
以下、自分用のメモも兼ねて、少し解説させていただきます。
|
|
17
|
+
意味がよく分からないと思いますが、ご容赦ください…。
|
|
18
|
+
|
|
19
|
+
解説
|
|
20
|
+
---
|
|
21
|
+
先に次の点を頭に入れておいてから、この先を読み進めてください。
|
|
22
|
+
- 動画の指定方法は```videoId```で1つ指定する方法と、```playlist```で1つ以上指定できる方法がある
|
|
23
|
+
- ```playerVars```ではプレイヤーのオプションや```playlist```の指定ができる
|
|
24
|
+
|
|
25
|
+
最初は「syuuphxさんのコードがそのまま動くので、それを参考にしてください」と書こうと思ったら、Edgeで動きませんでした。
|
|
26
|
+
というか公式の例をコピペしても、Edgeで動きませんでした……。
|
|
27
|
+
|
|
28
|
+
それで調べていくうちに、一筋縄ではいかないことが分かりました。
|
|
29
|
+
|
|
30
|
+
Edgeでの問題点・謎な点は、次のとおりです。
|
|
31
|
+
|
|
32
|
+
- Edgeでは```onReady```や```onStateChange```などのイベントが発火しない
|
|
33
|
+
- Edgeで動画の自動再生とループを同時に実現するには、```videoId```で動画を指定して、```playlist```でも動画を指定する必要がある
|
|
34
|
+
- なぜか```playerVars```では、Edgeのみがオプションを指定できる。しかも、なぜかマニュアルに書いていない```mute```パラメーターが使えた
|
|
35
|
+
|
|
36
|
+
更に、Chrome・Firefox・Operaでも以下のような少し面倒なことがありました。
|
|
37
|
+
|
|
38
|
+
- 自動再生をするには```player.playVideo()```を実行する必要がある（これ単体では問題なし）
|
|
39
|
+
- しかし、```videoId```のみで動画を指定する場合は問題なく動くが、```playlist```のみを再生する場合には```playlist```を用意するのに時間がかかるため、```playlist```の準備が完了するのを待ってから```player.playVideo()```を実行しなければならない。
|
|
40
|
+
- そして、動画のループをするには```playlist```を用意する必要がある。
|
|
41
|
+
|
|
42
|
+
これらを解決する方法は次のとおりです。
|
|
43
|
+
- Edge用に```playerVars```でオプションを指定する
|
|
44
|
+
- ```videoId```と```playlist```の両方で動画を指定する。（同じ動画を2つ用意することになる。）
|
|
45
|
+
|
|
46
|
+
関連
|
|
47
|
+
---
|
|
48
|
+
- [iframe 組み込みの YouTube Player API リファレンス](https://developers.google.com/youtube/iframe_api_reference?hl=ja#playVideoAt)
|
|
49
|
+
- [YouTube 埋め込みプレーヤーとプレーヤーのパラメータ ](https://developers.google.com/youtube/player_parameters?hl=ja#loop)
|
|
50
|
+
- [AutoPlay Not working properly](https://github.com/youtube/youtube-ios-player-helper/issues/67)
|
|
51
|
+
- [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)
|
|
52
|
+
- [Youtube iframe api not playing video on Edge / IE](https://stackoverflow.com/questions/41658448/youtube-iframe-api-not-playing-video-on-edge-ie)
|
|
53
|
+
|
|
54
|
+
コード
|
|
55
|
+
---
|
|
56
|
+
akkkkinさんの要望
|
|
57
|
+
|
|
58
|
+
> ランディングページを表示させた際、youtubeがオートで再生され、音はミュートの状態にしたく思っています。
|
|
59
|
+
> １ページ上で再生させたい動画数は１つ、ミュートでループ再生を行いたいです。
|
|
60
|
+
|
|
61
|
+
最新のEdge・Chrome・Firefox・Operaのみ確認しています。
|
|
62
|
+
iPhoneやAndroidでは```playVideo()```が使えず、希望通りには動きません。
|
|
63
|
+
|
|
64
|
+
```HTML
|
|
65
|
+
<!DOCTYPE html>
|
|
66
|
+
<html>
|
|
67
|
+
<head>
|
|
68
|
+
<meta charset="utf-8"/>
|
|
69
|
+
</head>
|
|
70
|
+
<body>
|
|
71
|
+
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
|
|
72
|
+
<div id="player"></div>
|
|
73
|
+
|
|
74
|
+
<script>
|
|
75
|
+
// 2. This code loads the IFrame Player API code asynchronously.
|
|
76
|
+
var tag = document.createElement('script');
|
|
77
|
+
|
|
78
|
+
tag.src = "https://www.youtube.com/iframe_api";
|
|
79
|
+
var firstScriptTag = document.getElementsByTagName('script')[0];
|
|
80
|
+
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
81
|
+
|
|
82
|
+
// 3. This function creates an <iframe> (and YouTube player)
|
|
83
|
+
// after the API code downloads.
|
|
84
|
+
var player;
|
|
85
|
+
|
|
86
|
+
// 動画のID
|
|
87
|
+
const videoId = 'M7lc1UVf-VE';
|
|
88
|
+
|
|
89
|
+
function onYouTubeIframeAPIReady() {
|
|
90
|
+
player = new YT.Player('player', {
|
|
91
|
+
height: '360',
|
|
92
|
+
width: '640',
|
|
93
|
+
playerVars: {
|
|
94
|
+
playlist: videoId,
|
|
95
|
+
// 以下のオプションはChrome・Firefox・Operaでは使えないが、なぜかEdgeでは使える
|
|
96
|
+
autoplay: 1,
|
|
97
|
+
mute: 1,
|
|
98
|
+
loop: 1
|
|
99
|
+
},
|
|
100
|
+
videoId: videoId,
|
|
101
|
+
// イベントがEdgeで発火しない・・・？
|
|
102
|
+
events: {
|
|
103
|
+
'onReady': onPlayerReady,
|
|
104
|
+
'onStateChange': onPlayerStateChange
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
// 4. The API will call this function when the video player is ready.
|
|
110
|
+
// ↑ 実際はプレイリストを読み込む場合は準備できていない。少し待たないといけない。
|
|
111
|
+
function onPlayerReady(event) {
|
|
112
|
+
event.target.mute(); // ミュート
|
|
113
|
+
event.target.setLoop(true); // ループ
|
|
114
|
+
event.target.playVideo(); // 動画の開始
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// 5. The API calls this function when the player's state changes.
|
|
118
|
+
// The function indicates that when playing a video (state=1),
|
|
119
|
+
// the player should play for six seconds and then stop.
|
|
120
|
+
function onPlayerStateChange(event) {
|
|
121
|
+
}
|
|
122
|
+
</script>
|
|
123
|
+
</body>
|
|
124
|
+
</html>
|
|
125
|
+
```
|