teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

最新修正コードを追記しました

2021/04/20 15:01

投稿

11mi_se14
11mi_se14

スコア0

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