teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問youtubeでリンクをクリックすると指定の開始位置へスキップし、自動再生されるようにしたい

編集履歴

質問編集履歴

2

解決したためでもサイト削除

2020/06/30 03:03

投稿

yMarch
yMarch

スコア17

test CHANGED
File without changes
test CHANGED
@@ -19,12 +19,6 @@
19
19
  スマホでのオートプレイはiframe apiを利用しないと出来ないようだったので
20
20
 
21
21
  参照サイトを見ながら、chapter01～03の設定はできました。
22
-
23
-
24
-
25
- ▼デモサイト
26
-
27
- [http://www.studio-goblin.com/sample/youtube/play_time05.html](http://www.studio-goblin.com/sample/youtube/play_time05.html)
28
22
 
29
23
 
30
24
 

1

試行錯誤した結果、少し進歩したので修正

2020/06/30 03:03

投稿

yMarch
yMarch

スコア17

test CHANGED
@@ -1 +1 @@
1
- youtube ifarme apiを利用した、任意のタイミングで再生するyoutubeの埋込動画
1
+ youtubeでリンクをクリックすると指定の開始位置へスキップし、自動再生されるようにしたい
test CHANGED
@@ -16,171 +16,157 @@
16
16
 
17
17
 
18
18
 
19
- スマホでのオートプレイはiframe apiを利用しないと出来ないようだったので、
19
+ スマホでのオートプレイはiframe apiを利用しないと出来ないようだったので
20
20
 
21
- とりあえず動画を埋め込む＋スマホはmuteにしてオートプレイにすることまでは出来ました。
21
+ 参照サイトを見ながら、chapter01～03の設定はできました。
22
22
 
23
+
24
+
25
+ ▼デモサイト
26
+
23
- http://www.studio-goblin.com/sample/youtube/play_time03.html
27
+ [http://www.studio-goblin.com/sample/youtube/play_time05.html](http://www.studio-goblin.com/sample/youtube/play_time05.html)
24
28
 
25
29
 
26
30
 
27
31
  ▼参照サイト
28
32
 
29
- https://www.tam-tam.co.jp/tipsnote/javascript/post9896.html
33
+ [https://qiita.com/pecooh/items/210d29d26e982e169a7a](https://qiita.com/pecooh/items/210d29d26e982e169a7a)
30
-
31
- https://yuri-lifestyle.com/youtube_api/
32
34
 
33
35
 
34
36
 
37
+ # 解決したいこと
38
+
39
+ ★自動再生できるようにしたい★
40
+
41
+ ・ページ表示時に配置されている一番最初の動画が自動再生されない。
42
+
43
+ ・Chapter01、Chapter02…等のリンクをクリックすると動画が指定の秒数までスキップはするが、再生ボタンを押さないと再生されない。
44
+
45
+
46
+
47
+ こちらを解決するにはどうしたら良いでしょうか
48
+
49
+
50
+
51
+ # コード
52
+
35
53
  ```html
36
54
 
37
- <div id="player"></div>
55
+ <html>
38
56
 
39
- <ul>
57
+ <head>
40
58
 
41
- <li><a href="" class="chapter01">Chapter01</a></li>
59
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
42
60
 
43
- <li><a href="" class="chapter02">Chapter02</a></li>
61
+ <script src="https://www.youtube.com/iframe_api"></script>
44
62
 
45
- <li><a href="" class="chapter02">Chapter03</a></li>
63
+ </head>
46
64
 
65
+
66
+
67
+ <body>
68
+
69
+ <div class="container">
70
+
71
+ <div id="youtube"></div>
72
+
73
+ </div>
74
+
75
+ <!-- 切り替えボタン -->
76
+
77
+ <ul class="youtube_button">
78
+
79
+ <li>
80
+
81
+ <button id="50">Chapter01（50seconds）</button>
82
+
83
+ </li>
84
+
85
+ <li>
86
+
87
+ <button id="200">Chapter02（200seconds）</button>
88
+
89
+ </li>
90
+
91
+ <li>
92
+
93
+ <button id="400">Chapter03（400seconds）</button>
94
+
95
+ </li>
96
+
47
- </ul>
97
+ </ul>
98
+
99
+ </body>
100
+
101
+ <script src="pt05.js"></script>
102
+
103
+ </html>
48
104
 
49
105
  ```
50
106
 
51
107
  ```javascript
52
108
 
53
- // youtube iframe api
109
+ // iframeの初期読み込み
54
110
 
55
- var tag = document.createElement('script');
111
+ let player;
56
112
 
57
- tag.src = "https://www.youtube.com/iframe_api";
113
+ window.onYouTubeIframeAPIReady = () => {
58
114
 
59
- var firstScriptTag = document.getElementsByTagName('script')[0];
115
+ player = new YT.Player("youtube", {
60
116
 
117
+ height: "450",
118
+
119
+ width: "800",
120
+
61
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
121
+ videoId: "M7lc1UVf-VE",
122
+
123
+ playerVars: {
124
+
125
+ autoplay: 1,
126
+
127
+ controls: 0,
128
+
129
+ rel: 0,
130
+
131
+ playsinline: 1
132
+
133
+ },
134
+
135
+ events: {
136
+
137
+ }
138
+
139
+ });
140
+
141
+ };
62
142
 
63
143
 
64
144
 
65
- //判定
145
+ // buttonクリック時
66
146
 
67
- var mobile = false;
147
+ $(".youtube_button li").on("click", e => {
68
148
 
69
- var ua = navigator.userAgent;
149
+ $(".youtube_button li").removeClass("active");
70
150
 
71
- if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
151
+ // クリックしたボタンにactiveクラスをつける
72
152
 
73
- mobile = true;
153
+ e.target.classList.add("active");
74
154
 
75
- }
155
+ // iframeの動画を差し替える
76
156
 
77
- //スマホのときはmuteする
157
+ player.cueVideoById({
78
158
 
79
- function onPlayerReady(event) {
159
+ videoId: `M7lc1UVf-VE`,
80
160
 
81
- if (mobile) {
161
+ startSeconds: `${e.target.id}`
82
162
 
83
- event.target.mute()
163
+ });
84
164
 
85
- }
86
-
87
- event.target.playVideo();
88
-
89
- }
90
-
91
-
92
-
93
- var ytPlayer;
94
-
95
- function onYouTubeIframeAPIReady() {
96
-
97
- ytPlayer = new YT.Player('player',{
98
-
99
- width: 800,
100
-
101
- height: 450,
102
-
103
- videoId: 'LnhIVnk5BQQ',
104
-
105
- playerVars: {
106
-
107
- autoplay: 1,
108
-
109
- rel: 0,
110
-
111
- playsinline: 1
112
-
113
- },
114
-
115
- events: {
116
-
117
- 'onReady': onPlayerReady,
118
-
119
- }
120
-
121
- }
122
-
123
- );
165
+ });
124
-
125
- }
126
-
127
-
128
166
 
129
167
  ```
130
168
 
131
169
 
132
-
133
- # 解決したいこと
134
-
135
- Chapter01、Chapter02…等のリンクをクリックすると
136
-
137
- 動画が指定の秒数までスキップ＆自動再生するようにしたいです。
138
-
139
-
140
-
141
- 下記をjsに足してみたのですが、うまくいきませんでした・・・。
142
-
143
- ```javascript
144
-
145
- $('.chapter01').click(function() {
146
-
147
- function onYouTubeIframeAPIReady() {
148
-
149
- ytPlayer = new YT.Player('player',{
150
-
151
- width: 800,
152
-
153
- height: 450,
154
-
155
- playerVars: {
156
-
157
- autoplay: 1,
158
-
159
- start: 58,
160
-
161
- rel: 0,//関連動画表示オフ
162
-
163
- playsinline: 1
164
-
165
- },
166
-
167
- videoId: 'LnhIVnk5BQQ',
168
-
169
- events: {
170
-
171
- 'onReady': onPlayerReady,
172
-
173
- }
174
-
175
- } );
176
-
177
- }
178
-
179
- });
180
-
181
-
182
-
183
- ```
184
170
 
185
171
  当方、jsについては初心者のため、どうしたら解決するのか全くわからず途方にくれております。
186
172