質問編集履歴
7
補足部分の削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -62,13 +62,4 @@
|
|
|
62
62
|
これはYouTube APIについての問題というよりも、基本的なJavaScriptの入れ子構造について知識不足であると思うのですが、これだけ色々な入れ子になるとどう対処したらいいものか…、私ではまったく判断できません。
|
|
63
63
|
|
|
64
64
|
どうか有識者の皆さま、プロの視点からのアドバイスを頂戴できれば幸甚に存じます。
|
|
65
|
-
何卒宜しくお願い申し上げます。
|
|
65
|
+
何卒宜しくお願い申し上げます。
|
|
66
|
-
|
|
67
|
-
###補足
|
|
68
|
-
アクセスとご回答の比率から内容の困難さが予想されます。
|
|
69
|
-
|
|
70
|
-
そこで、``// ★「見る」クリックで動画表示``の関数``on('click', function() {``だけでも使うことができれば御の字であると補足させて頂きたいと思います。
|
|
71
|
-
|
|
72
|
-
ベストな選択は上の３つ全てのfunctionを使うことですが、この１つだけでも囲む方法がもしあればぜひ、ご意見を下さいませ。
|
|
73
|
-
|
|
74
|
-
私事で大変恐縮ですが、この「見る」クリックの部分は、動画遅延ロード機能（サムネイルのクリックで動画を読み込む機能）を表しておりまして、これだけはどうしても譲りたくないのです。
|
6
補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -62,4 +62,13 @@
|
|
|
62
62
|
これはYouTube APIについての問題というよりも、基本的なJavaScriptの入れ子構造について知識不足であると思うのですが、これだけ色々な入れ子になるとどう対処したらいいものか…、私ではまったく判断できません。
|
|
63
63
|
|
|
64
64
|
どうか有識者の皆さま、プロの視点からのアドバイスを頂戴できれば幸甚に存じます。
|
|
65
|
-
何卒宜しくお願い申し上げます。
|
|
65
|
+
何卒宜しくお願い申し上げます。
|
|
66
|
+
|
|
67
|
+
###補足
|
|
68
|
+
アクセスとご回答の比率から内容の困難さが予想されます。
|
|
69
|
+
|
|
70
|
+
そこで、``// ★「見る」クリックで動画表示``の関数``on('click', function() {``だけでも使うことができれば御の字であると補足させて頂きたいと思います。
|
|
71
|
+
|
|
72
|
+
ベストな選択は上の３つ全てのfunctionを使うことですが、この１つだけでも囲む方法がもしあればぜひ、ご意見を下さいませ。
|
|
73
|
+
|
|
74
|
+
私事で大変恐縮ですが、この「見る」クリックの部分は、動画遅延ロード機能（サムネイルのクリックで動画を読み込む機能）を表しておりまして、これだけはどうしても譲りたくないのです。
|
5
コードの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
YouTubeの制御ボタンについて、機能は実装できたのですが、関数を入れ子にすると動作せず、質問させて頂きます。
|
|
2
2
|
|
|
3
3
|
まず実装できた場合がこちらでして、
|
|
4
|
-
[https://jsfiddle.net/
|
|
4
|
+
[https://jsfiddle.net/8d3g6mc5/](https://jsfiddle.net/8d3g6mc5/)
|
|
5
5
|
ご覧のように「再生・停止」いずれも動画が制御できています。
|
|
6
6
|
|
|
7
7
|
今回はこれを３つの関数で囲みたいのですが、そうすると動作しなくなってしまう部分で躓いてしまいました。
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
YoutubeCtr();
|
|
58
58
|
```
|
|
59
59
|
上記コードのように３つの関数を加えて動作しなくなったものがこちらです。
|
|
60
|
-
[https://jsfiddle.net/
|
|
60
|
+
[https://jsfiddle.net/8d3g6mc5/1/](https://jsfiddle.net/8d3g6mc5/1/)
|
|
61
61
|
|
|
62
62
|
これはYouTube APIについての問題というよりも、基本的なJavaScriptの入れ子構造について知識不足であると思うのですが、これだけ色々な入れ子になるとどう対処したらいいものか…、私ではまったく判断できません。
|
|
63
63
|
|
4
コードの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,7 +17,15 @@
|
|
|
17
17
|
|
|
18
18
|
// ★「見る」クリックで動画表示
|
|
19
19
|
$('.lazy-load-youtube').on('click', function() {
|
|
20
|
-
$('#target').html('<div class="
|
|
20
|
+
$('#target').html('<div class="media">
|
|
21
|
+
<div class="container-youtube">
|
|
22
|
+
<iframe src="//www.youtube.com/embed/ZVT_CNl0Wvc
|
|
23
|
+
?autoplay=1&iv_load_policy=3&rel=0"
|
|
24
|
+
allowfullscreen=""
|
|
25
|
+
frameborder="0">
|
|
26
|
+
</iframe>
|
|
27
|
+
</div>
|
|
28
|
+
</div>');
|
|
21
29
|
|
|
22
30
|
// ★動画表示してから
|
|
23
31
|
setTimeout(function(){
|
|
@@ -25,8 +33,9 @@
|
|
|
25
33
|
// 制御ボタンの設定
|
|
26
34
|
var player;
|
|
27
35
|
function onYouTubeIframeAPIReady() {
|
|
36
|
+
player = new YT.Player(
|
|
28
|
-
|
|
37
|
+
document.getElementsByClassName('container-youtube')[0], {
|
|
29
|
-
|
|
38
|
+
videoId: 'ZVT_CNl0Wvc',
|
|
30
39
|
});
|
|
31
40
|
var clickElement = document.getElementById("play");
|
|
32
41
|
clickElement.addEventListener("click", function(event) {
|
|
@@ -47,7 +56,7 @@
|
|
|
47
56
|
}
|
|
48
57
|
YoutubeCtr();
|
|
49
58
|
```
|
|
50
|
-
上記コードのように３つの関数を加えて動作しなくなった
|
|
59
|
+
上記コードのように３つの関数を加えて動作しなくなったものがこちらです。
|
|
51
60
|
[https://jsfiddle.net/savm7etn/1/](https://jsfiddle.net/savm7etn/1/)
|
|
52
61
|
|
|
53
62
|
これはYouTube APIについての問題というよりも、基本的なJavaScriptの入れ子構造について知識不足であると思うのですが、これだけ色々な入れ子になるとどう対処したらいいものか…、私ではまったく判断できません。
|
3
誤字の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
今回はこれを３つの関数で囲みたいのですが、そうすると動作しなくなってしまう部分で躓いてしまいました。
|
|
8
8
|
|
|
9
|
-
つまり下記の
|
|
9
|
+
つまり下記のJavaScriptにあるように、
|
|
10
10
|
``// 制御ボタンの設定``の部分を、
|
|
11
11
|
``// ★使いまわすために関数にしておく``と
|
|
12
12
|
``// ★「見る」クリックで動画表示``と
|
2
誤字の修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
JavaScriptで関数が複雑な入れ子になる場合の処理
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
YouTubeの制御ボタンについて、機能は実装できたのですが、関数を入れ子にすると動作せず、質問させて頂きます。
|
|
2
2
|
|
|
3
3
|
まず実装できた場合がこちらでして、
|
|
4
4
|
[https://jsfiddle.net/savm7etn/](https://jsfiddle.net/savm7etn/)
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
今回はこれを３つの関数で囲みたいのですが、そうすると動作しなくなってしまう部分で躓いてしまいました。
|
|
8
8
|
|
|
9
|
-
つまり下記の
|
|
9
|
+
つまり下記のhttps://teratail.com/questions/146752にあるように、
|
|
10
10
|
``// 制御ボタンの設定``の部分を、
|
|
11
11
|
``// ★使いまわすために関数にしておく``と
|
|
12
12
|
``// ★「見る」クリックで動画表示``と
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
上記コードのように３つの関数を加えて動作しなくなったサンプルがこちらです。
|
|
51
51
|
[https://jsfiddle.net/savm7etn/1/](https://jsfiddle.net/savm7etn/1/)
|
|
52
52
|
|
|
53
|
-
これは
|
|
53
|
+
これはYouTube APIについての問題というよりも、基本的なJavaScriptの入れ子構造について知識不足であると思うのですが、これだけ色々な入れ子になるとどう対処したらいいものか…、私ではまったく判断できません。
|
|
54
54
|
|
|
55
55
|
どうか有識者の皆さま、プロの視点からのアドバイスを頂戴できれば幸甚に存じます。
|
|
56
56
|
何卒宜しくお願い申し上げます。
|
1
リンク先修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
// ★「見る」クリックで動画表示
|
|
19
19
|
$('.lazy-load-youtube').on('click', function() {
|
|
20
|
-
$('#target').html('<div class="reply_inner_media"><div class="container-lazyload preview-lazyload container-youtube"><iframe style="vertical-align:top;" src="//www.youtube.com/embed/
|
|
20
|
+
$('#target').html('<div class="reply_inner_media"><div class="container-lazyload preview-lazyload container-youtube"><iframe style="vertical-align:top;" src="//www.youtube.com/embed/ZVT_CNl0Wvc?autoplay=1&iv_load_policy=3&rel=0" allowfullscreen="" width="546" height="315" frameborder="0"></iframe></div></div>');
|
|
21
21
|
|
|
22
22
|
// ★動画表示してから
|
|
23
23
|
setTimeout(function(){
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
var player;
|
|
27
27
|
function onYouTubeIframeAPIReady() {
|
|
28
28
|
player = new YT.Player( document.getElementsByClassName('container-youtube')[0], {
|
|
29
|
-
videoId: '
|
|
29
|
+
videoId: 'ZVT_CNl0Wvc',
|
|
30
30
|
});
|
|
31
31
|
var clickElement = document.getElementById("play");
|
|
32
32
|
clickElement.addEventListener("click", function(event) {
|