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

編集履歴

質問編集履歴

2

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

2020/06/30 03:03

投稿

yMarch
yMarch

スコア17

title CHANGED
File without changes
body CHANGED
@@ -10,9 +10,6 @@
10
10
  スマホでのオートプレイはiframe apiを利用しないと出来ないようだったので
11
11
  参照サイトを見ながら、chapter01～03の設定はできました。
12
12
 
13
- ▼デモサイト
14
- [http://www.studio-goblin.com/sample/youtube/play_time05.html](http://www.studio-goblin.com/sample/youtube/play_time05.html)
15
-
16
13
  ▼参照サイト
17
14
  [https://qiita.com/pecooh/items/210d29d26e982e169a7a](https://qiita.com/pecooh/items/210d29d26e982e169a7a)
18
15
 

1

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

2020/06/30 03:03

投稿

yMarch
yMarch

スコア17

title CHANGED
@@ -1,1 +1,1 @@
1
- youtube ifarme apiを利用した、任意のタイミングで再生するyoutubeの埋込動画
1
+ youtubeでリンクをクリックすると指定の開始位置へスキップし、自動再生されるようにしたい
body CHANGED
@@ -7,89 +7,82 @@
7
7
 
8
8
  ## やってみたこと
9
9
 
10
- スマホでのオートプレイはiframe apiを利用しないと出来ないようだったので、
10
+ スマホでのオートプレイはiframe apiを利用しないと出来ないようだったので
11
- とりあえず動画を埋め込む＋スマホはmuteにしてオートプレイにすることまでは出来ました。
11
+ 参照サイトを見ながら、chapter01～03の設定はできました。
12
- http://www.studio-goblin.com/sample/youtube/play_time03.html
13
12
 
13
+ ▼デモサイト
14
+ [http://www.studio-goblin.com/sample/youtube/play_time05.html](http://www.studio-goblin.com/sample/youtube/play_time05.html)
15
+
14
16
  ▼参照サイト
15
- https://www.tam-tam.co.jp/tipsnote/javascript/post9896.html
17
+ [https://qiita.com/pecooh/items/210d29d26e982e169a7a](https://qiita.com/pecooh/items/210d29d26e982e169a7a)
16
- https://yuri-lifestyle.com/youtube_api/
17
18
 
18
- ```html
19
- <div id="player"></div>
20
- <ul>
19
+ # 解決したいこと
21
- <li><a href="" class="chapter01">Chapter01</a></li>
22
- <li><a href="" class="chapter02">Chapter02</a></li>
23
- <li><a href="" class="chapter02">Chapter03</a></li>
24
- </ul>
20
+ ★自動再生できるようにしたい★
25
- ```
26
- ```javascript
27
- // youtube iframe api
21
+ ・ページ表示時に配置されている一番最初の動画が自動再生されない。
28
- var tag = document.createElement('script');
29
- tag.src = "https://www.youtube.com/iframe_api";
22
+ ・Chapter01、Chapter02…等のリンクをクリックすると動画が指定の秒数までスキップはするが、再生ボタンを押さないと再生されない。
30
- var firstScriptTag = document.getElementsByTagName('script')[0];
31
- firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
32
23
 
33
- //判定
34
- var mobile = false;
35
- var ua = navigator.userAgent;
36
- if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
37
- mobile = true;
38
- }
39
- //スマホのときはmuteする
24
+ こちらを解決するにはどうしたら良いでしょうか
40
- function onPlayerReady(event) {
41
- if (mobile) {
42
- event.target.mute()
43
- }
44
- event.target.playVideo();
45
- }
46
25
 
26
+ # コード
27
+ ```html
47
- var ytPlayer;
28
+ <html>
48
- function onYouTubeIframeAPIReady() {
49
- ytPlayer = new YT.Player('player',{
50
- width: 800,
51
- height: 450,
52
- videoId: 'LnhIVnk5BQQ',
53
- playerVars: {
54
- autoplay: 1,
29
+ <head>
30
+ <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
55
- rel: 0,
31
+ <script src="https://www.youtube.com/iframe_api"></script>
56
- playsinline: 1
32
+ </head>
57
- },
58
- events: {
59
- 'onReady': onPlayerReady,
60
- }
61
- }
62
- );
63
- }
64
33
 
34
+ <body>
35
+ <div class="container">
36
+ <div id="youtube"></div>
37
+ </div>
38
+ <!-- 切り替えボタン -->
39
+ <ul class="youtube_button">
40
+ <li>
41
+ <button id="50">Chapter01（50seconds）</button>
42
+ </li>
43
+ <li>
44
+ <button id="200">Chapter02（200seconds）</button>
45
+ </li>
46
+ <li>
47
+ <button id="400">Chapter03（400seconds）</button>
48
+ </li>
49
+ </ul>
50
+ </body>
51
+ <script src="pt05.js"></script>
52
+ </html>
65
53
  ```
66
-
67
- # 解決したいこと
68
- Chapter01、Chapter02…等のリンクをクリックすると
69
- 動画が指定の秒数までスキップ＆自動再生するようにしたいです。
70
-
71
- 下記をjsに足してみたのですが、うまくいきませんでした・・・。
72
54
  ```javascript
73
- $('.chapter01').click(function() {
55
+ // iframeの初期読み込み
56
+ let player;
74
- function onYouTubeIframeAPIReady() {
57
+ window.onYouTubeIframeAPIReady = () => {
75
- ytPlayer = new YT.Player('player',{
58
+ player = new YT.Player("youtube", {
76
- width: 800,
77
- height: 450,
59
+ height: "450",
60
+ width: "800",
61
+ videoId: "M7lc1UVf-VE",
78
- playerVars: {
62
+ playerVars: {
79
- autoplay: 1,
63
+ autoplay: 1,
80
- start: 58,
64
+ controls: 0,
81
- rel: 0,//関連動画表示オフ
65
+ rel: 0,
82
- playsinline: 1
66
+ playsinline: 1
83
- },
67
+ },
84
- videoId: 'LnhIVnk5BQQ',
85
- events: {
68
+ events: {
86
- 'onReady': onPlayerReady,
87
- }
69
+ }
88
- } );
89
- }
90
- });
70
+ });
71
+ };
91
72
 
73
+ // buttonクリック時
74
+ $(".youtube_button li").on("click", e => {
75
+ $(".youtube_button li").removeClass("active");
76
+ // クリックしたボタンにactiveクラスをつける
77
+ e.target.classList.add("active");
78
+ // iframeの動画を差し替える
79
+ player.cueVideoById({
80
+ videoId: `M7lc1UVf-VE`,
81
+ startSeconds: `${e.target.id}`
82
+ });
83
+ });
92
84
  ```
85
+
93
86
  当方、jsについては初心者のため、どうしたら解決するのか全くわからず途方にくれております。
94
87
  お手数ですが、解決方法をご教示いただけますと幸いです。
95
88
  よろしくお願いいたします。