質問編集履歴
1
試したこと、タイトル等修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
jQuery
|
|
1
|
+
jQueryで複数の動画サムネイル再生、ボタンで切り替えしたい
|
body
CHANGED
|
@@ -1,86 +1,17 @@
|
|
|
1
1
|
###前提・実現したいこと
|
|
2
|
-
複数の動画をボタン切り替えでそれぞれ再生させたい。
|
|
2
|
+
スマホに動画をはめ込んで、複数の動画をボタン切り替えでそれぞれ再生させたい。
|
|
3
3
|
|
|
4
4
|
・各ボタンをクリックするとそのボタンに対応した動画を再生
|
|
5
5
|
・動画が終了するともう一度再生ボタンが表示され、クリックすると同じ動画が再生
|
|
6
6
|
・動画再生中（または動画終了時）にその他のボタンをクリックすると、再生中の動画は中断されクリックされたボタンの動画が再生される
|
|
7
7
|
|
|
8
8
|
###発生している問題・エラーメッセージ
|
|
9
|
-
動画が
|
|
10
|
-
video = $videoAll.get(0);
|
|
9
|
+
動画がvideo = $videoAll.get(0);で指定した動画しか再生されない
|
|
11
|
-
で指定した動画しか再生されない
|
|
12
10
|
|
|
13
11
|
|
|
14
12
|
###該当のソースコード
|
|
15
|
-
>>HTML
|
|
16
13
|
|
|
17
|
-
```ここに言語を入力
|
|
18
|
-
<section id="function" class="container">
|
|
19
|
-
<div id="function__detail">
|
|
20
|
-
<div id="function__flame">
|
|
21
|
-
<div id="function__video">
|
|
22
|
-
<video id="video1" class="video video__content" src="img/hoge01.mp4"></video>
|
|
23
|
-
<video style="display: none;" id="video2" class="video video__content" src="img/hoge02.mp4"></video>
|
|
24
|
-
<video style="display: none;" id="video3" class="video video__content" src="img/hoge03.mp4"></video>
|
|
25
|
-
<video style="display: none;" id="video4" class="video video__content" src="img/hoge04.mp4"></video>
|
|
26
|
-
<video style="display: none;" id="video5" class="video video__content" src="img/hoge05.mp4"></video>
|
|
27
|
-
<video style="display: none;" id="video6" class="video video__content" src="img/hoge06.mp4"></video>
|
|
28
|
-
</div>
|
|
29
|
-
<div id="function__replay">
|
|
30
|
-
<p id="btn__replay">もう一度見る</p>
|
|
31
|
-
</div>
|
|
32
|
-
</div>
|
|
33
|
-
<div id="function__detailBox">
|
|
34
|
-
<h3>hogehogehogehogehogehogehogehoge</h3>
|
|
35
|
-
<a class="function__contents" href="#video1">
|
|
36
|
-
<dl class="isplay">
|
|
37
|
-
<dd class="thumbnail"><img src="images"></dd>
|
|
38
|
-
<dt>hoge</dt>
|
|
39
|
-
<dd class="function__text">hoge</dd>
|
|
40
|
-
</dl>
|
|
41
|
-
</a>
|
|
42
|
-
<a class="function__contents" href="#video2">
|
|
43
|
-
<dl class="isplay">
|
|
44
|
-
<dd class="thumbnail"><img src="images"></dd>
|
|
45
|
-
<dt>hogehoge</dt>
|
|
46
|
-
<dd class="function__text">hogehoge</dd>
|
|
47
|
-
</dl>
|
|
48
|
-
</a>
|
|
49
|
-
<a class="function__contents" href="#video3">
|
|
50
|
-
<dl class="isplay">
|
|
51
|
-
<dd class="thumbnail"><img src="images"></dd>
|
|
52
|
-
<dt>hogehogehoge</dt>
|
|
53
|
-
<dd class="function__text">hogehogehoge</dd>
|
|
54
|
-
</dl>
|
|
55
|
-
</a>
|
|
56
|
-
<a class="function__contents" href="#video4">
|
|
57
|
-
<dl class="isplay">
|
|
58
|
-
<dd class="thumbnail"><img src="images"></dd>
|
|
59
|
-
<dt>hogehogehogehoge</dt>
|
|
60
|
-
<dd class="function__text">hogehogehogehoge</dd>
|
|
61
|
-
</dl>
|
|
62
|
-
</a>
|
|
63
|
-
<a class="function__contents" href="#video5">
|
|
64
|
-
<dl class="isplay">
|
|
65
|
-
<dd class="thumbnail"><img src="images"></dd>
|
|
66
|
-
<dt>hogehogehogehogehoge</dt>
|
|
67
|
-
<dd class="function__text">hogehogehogehogehoge</dd>
|
|
68
|
-
</dl>
|
|
69
|
-
</a>
|
|
70
|
-
<a class="function__contents" href="#video6">
|
|
71
|
-
<dl class="isplay">
|
|
72
|
-
<dd class="thumbnail"><img src="images"></dd>
|
|
73
|
-
<dt>hogehogehogehogehogehoge</dt>
|
|
74
|
-
<dd class="function__text">hogehogehogehogehogehoge</dd>
|
|
75
|
-
</dl>
|
|
76
|
-
</a>
|
|
77
|
-
</div>
|
|
78
|
-
</div>
|
|
79
|
-
</section>
|
|
80
|
-
```
|
|
81
14
|
|
|
82
|
-
|
|
83
|
-
|
|
84
15
|
>>JavaScript
|
|
85
16
|
|
|
86
17
|
```ここに言語を入力
|
|
@@ -128,6 +59,9 @@
|
|
|
128
59
|
|
|
129
60
|
|
|
130
61
|
###試したこと
|
|
62
|
+
thisを使ってそれぞれの動画を再生させようとしたがうまくいかない。
|
|
63
|
+
エラーチェック
|
|
64
|
+
その他google,githubなどでも検索しましたが解決できませんでした。
|
|
131
65
|
|
|
132
66
|
###補足情報(言語/FW/ツール等のバージョンなど)
|
|
133
|
-
|
|
67
|
+
独学の超初心者です。実現したいことがうまく伝わっていないかもしれませんが、なんとかよろしくお願いします。
|