質問編集履歴
1
コードの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
<div class="fv">
|
|
6
6
|
|
|
7
|
-
<a
|
|
7
|
+
<div class="detail-wrap">
|
|
8
8
|
|
|
9
|
-
<
|
|
9
|
+
<video id="detail" src="img/detail1.mp4" muted playsinline poster="img/circle.png"></video>
|
|
10
10
|
|
|
11
|
-
<i
|
|
11
|
+
<div class="detail-btn" id="detail-btn"></div>
|
|
12
12
|
|
|
13
|
-
</
|
|
13
|
+
</div>
|
|
14
14
|
|
|
15
15
|
</div>
|
|
16
16
|
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
js
|
|
35
|
+
js(画像で置き換え時)
|
|
36
36
|
|
|
37
37
|
```ここに言語を入力
|
|
38
38
|
|
|
@@ -52,6 +52,40 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
+
js(動画再生、停止ボタン)
|
|
56
|
+
|
|
57
|
+
```ここに言語を入力
|
|
58
|
+
|
|
59
|
+
const video = document.querySelector("#detail");
|
|
60
|
+
|
|
61
|
+
const video_btn = document.querySelector("#detail-btn");
|
|
62
|
+
|
|
63
|
+
let is_playing = false;
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
video_btn.addEventListener("click", () => {
|
|
68
|
+
|
|
69
|
+
if (!is_playing) {
|
|
70
|
+
|
|
71
|
+
video.play();
|
|
72
|
+
|
|
73
|
+
is_playing = true;
|
|
74
|
+
|
|
75
|
+
} else {
|
|
76
|
+
|
|
77
|
+
video.pause();
|
|
78
|
+
|
|
79
|
+
is_playing = false;
|
|
80
|
+
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
});
|
|
84
|
+
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
55
89
|
上記のような構成のポートフォリオサイトを作成演習しております。
|
|
56
90
|
|
|
57
91
|
画像(detail)をクリックするとfvが隠れportfolioが表示されるのですが,この画像部分を動画にし、再生終了した際にportfolioが表示されるようにしたいです。
|