質問編集履歴
1
最新修正コードを追記しました
title
CHANGED
File without changes
|
body
CHANGED
@@ -12,7 +12,49 @@
|
|
12
12
|
参考にしたサイト
|
13
13
|
[videoタグの属性やJSを使用した動画のコントロール](https://www.marukin-ad.co.jp/marulog/?p=2721)
|
14
14
|
[動画ファイルを自動再生する](https://gray-code.com/javascript/auto-play-the-video/)
|
15
|
+
###最新修正ソースコード
|
16
|
+
```JavaScript
|
17
|
+
var w = window, player;
|
18
|
+
// 再生したいyoutubeの動画id
|
19
|
+
var vid = 'Ftm2uv7-Ybw';
|
15
20
|
|
21
|
+
var tag = document.createElement('script');
|
22
|
+
tag.src = "https://www.youtube.com/iframe_api";
|
23
|
+
var firstScriptTag = document.getElementsByTagName('script')[0];
|
24
|
+
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
25
|
+
// プレイヤーが使用可能になったとき
|
26
|
+
function onPlayerReady(event) {
|
27
|
+
// ミュートする
|
28
|
+
event.target.mute();
|
29
|
+
}
|
30
|
+
w.onYouTubeIframeAPIReady = function() {
|
31
|
+
player = new YT.Player('video', {
|
32
|
+
events: {
|
33
|
+
// イベントを登録
|
34
|
+
'onReady': onPlayerReady,
|
35
|
+
}
|
36
|
+
// 置き換えるHTML要素のid
|
37
|
+
videoId: vid,
|
38
|
+
playerVars: {
|
39
|
+
rel: 0, //動画再生後の関連動画を表示しない
|
40
|
+
showinfo: 0, //動画再生前に動画情報を表示しない
|
41
|
+
autoplay: 1, //動画準備後に自動再生
|
42
|
+
loop: 1 //ループ設定
|
43
|
+
},
|
44
|
+
events: {
|
45
|
+
onStateChange: function(e) {
|
46
|
+
// 再生終了後
|
47
|
+
if ( e.data == YT.PlayerState.ENDED ) {
|
48
|
+
//再生
|
49
|
+
e.target.playVideo();
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
53
|
+
});
|
54
|
+
player.setLoop(true);
|
55
|
+
|
56
|
+
};
|
57
|
+
```
|
16
58
|
### ソースコード
|
17
59
|
|
18
60
|
```JavaScript
|