Skip to content

Commit 8045878

Browse files
wsmhwsmh
committed
视频的切换/暂停/播放等基础功能
1 parent c7696f6 commit 8045878

14 files changed

+298
-22
lines changed

Diff for: ‎css/bottomBar.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.bottomBar {
2+
position: relative;
3+
width: 160px;
4+
height: 90px;
5+
margin-top: 13px;
6+
left: 0;
7+
box-shadow: -11px -15px 20px 1px rgba(0, 0, 0, 0.5);
8+
border-top: 1px solid rgba(99, 98, 98, 0.189);
9+
}
10+
11+
.bottomBar-item {
12+
display: flex;
13+
align-items: center;
14+
width: 128px;
15+
height: 40px;
16+
cursor: pointer;
17+
transition: all 0.3s;
18+
margin-top: 3px;
19+
margin-left: 16px;
20+
}
21+
22+
.bottomBar-item p {
23+
color: white;
24+
opacity: 0.6;
25+
font-size: 14px;
26+
}
27+
28+
.bottomBar-item:hover {
29+
background-color: rgba(128, 128, 128, 0.2);
30+
border-radius: 12px;
31+
32+
.sideBar-img,
33+
p {
34+
opacity: 1;
35+
}
36+
}

Diff for: ‎css/sideBar.css

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.sideBar {
22
position: relative;
33
left: 10px;
4-
width: 138px;
5-
height: 650px;
4+
width: 160px;
5+
height: 660px;
66
margin-top: 5px;
77
overflow-y: scroll;
88
overflow-x: scroll;
@@ -26,7 +26,8 @@
2626
height: 40px;
2727
cursor: pointer;
2828
transition: all 0.3s;
29-
margin-top: 5px;
29+
margin-top: 1px;
30+
margin-left: 6px;
3031
}
3132

3233

@@ -37,7 +38,7 @@
3738
background-image: url(../src/sideBarBgcIcon.png);
3839
background-size: cover;
3940
margin-right: 10px;
40-
opacity: 0.6;
41+
opacity: 0.5;
4142
}
4243

4344
.sideBar-item p {

Diff for: ‎css/topBar.css

+9-17
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
1-
.totalCon {
2-
background-color: rgb(22, 24, 35);
3-
background-image: url('../src/bgc.png');
4-
background-position-x: 50%;
5-
background-size: cover;
6-
border-radius: 7px;
7-
}
8-
91
.topBar {
102
display: flex;
113
justify-content: space-between;
124
align-items: center;
13-
height: 68px;
5+
height: 65px;
146
}
157

168
.logo {
@@ -54,15 +46,15 @@
5446
}
5547

5648
.searchBar input {
57-
border: 1.5px solid rgba(255, 255, 255, 0.7);
49+
border: 2px solid rgba(255, 255, 255, 0.7);
5850
background-color: rgba(0, 0, 0, 0);
5951
border-right: none;
6052
text-indent: 15px;
6153
flex: 5;
62-
height: 40px;
54+
height: 36px;
6355
color: white;
64-
border-top-left-radius: 9.5px;
65-
border-bottom-left-radius: 9.5px;
56+
border-top-left-radius: 14px;
57+
border-bottom-left-radius: 14px;
6658
}
6759

6860
.searchBar input::placeholder {
@@ -75,11 +67,11 @@
7567
align-items: center;
7668
cursor: pointer;
7769
flex: 1;
78-
height: 42px;
79-
border: 1.5px solid rgba(255, 255, 255, 0.7);
70+
height: 38px;
71+
border: 2px solid rgba(255, 255, 255, 0.7);
8072
border-left: none;
81-
border-top-right-radius: 9.5px;
82-
border-bottom-right-radius: 9.5px;
73+
border-top-right-radius: 14px;
74+
border-bottom-right-radius: 14px;
8375

8476
}
8577

Diff for: ‎css/total.css

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
11
.totalCon {
2-
height: 820px;
2+
height: 100%;
3+
background-color: rgb(22, 24, 35);
4+
background-image: url('../src/bgc.png');
5+
background-position-x: 50%;
6+
background-size: cover;
7+
border-radius: 7px;
8+
}
9+
10+
body {
11+
padding: 0;
12+
height: 100%;
13+
margin: 0;
14+
overflow: hidden;
315
}

Diff for: ‎css/video.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.swiper {
2+
width: 1430px;
3+
height: 740px;
4+
outline: none;
5+
}
6+
7+
.swiper-slide {
8+
width: 1430px;
9+
height: 700px;
10+
display: flex;
11+
justify-content: center;
12+
cursor: pointer;
13+
}
14+
15+
.video-con {
16+
top: 70px;
17+
left: 160px;
18+
position: absolute;
19+
background-color: rgba(128, 128, 128, 0.201);
20+
display: flex;
21+
flex-direction: column;
22+
border-radius: 15px;
23+
}
24+
25+
.control {
26+
position: absolute;
27+
width: 1430px;
28+
bottom: 0;
29+
height: 40px;
30+
display: flex;
31+
flex-direction: column;
32+
33+
border-radius: 0 0 15px 15px;
34+
35+
}
36+
37+
.progress-line {
38+
bottom: 40px;
39+
width: 1430px;
40+
height: 2px;
41+
background-color: red;
42+
}
43+
44+
.control-set {
45+
height: 38px;
46+
width: 1430px;
47+
background-color: rgba(0, 0, 0, 0.112);
48+
border-radius: 0 0 15px 15px;
49+
display: flex;
50+
flex-direction: row;
51+
}

Diff for: ‎dist/swiper/swiper-bundle.min.css

+13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dist/swiper/swiper-bundle.min.js

+14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎douyinHome.html

+91
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,13 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>douyin</title>
88

9+
<script src="jquery/jquery-3.7.1.min.js"></script>
910
<link rel="stylesheet" href="css/total.css">
1011
<link rel="stylesheet" href="css/sideBar.css">
1112
<link rel="stylesheet" href="css/topBar.css">
13+
<link rel="stylesheet" href="css/bottomBar.css">
14+
<link rel="stylesheet" href="dist/swiper/swiper-bundle.min.css">
15+
<link rel="stylesheet" href="css/video.css">
1216
</head>
1317

1418
<body>
@@ -226,10 +230,97 @@
226230
<!-- 底部栏 -->
227231
<div class="bottomBar">
228232

233+
<div class="bottomBar-item">
234+
<div class="sideBar-img" style="background-position-x: -1872px;"></div>
235+
<p>设置</p>
236+
</div>
237+
<div class="bottomBar-item">
238+
<div class="sideBar-img" style="background-position-x: -1824px;"></div>
239+
<p>业务合作</p>
240+
</div>
241+
242+
</div>
243+
<!-- 视频模块 -->
244+
<div class="video-con">
245+
<div class="swiper" tabindex="0">
246+
<div class="swiper-wrapper">
247+
<div class="swiper-slide">
248+
<video autoplay muted src="src/video/video-1.mp4" height="700"></video>
249+
<div class="control">
250+
<div class="progress-line"></div>
251+
<div class="control-set">
252+
253+
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="32"
254+
height="32" focusable="false" style="font-size:32px">
255+
<path
256+
d="M23.5 15.134C24.1667 15.5189 24.1667 16.4811 23.5 16.866L12.25 23.3612C11.5833 23.7461 10.75 23.265 10.75 22.4952L10.75 9.50481C10.75 8.73501 11.5833 8.25388 12.25 8.63878L23.5 15.134Z"
257+
fill="white"></path>
258+
</svg>
259+
<p>00:01 / 00:54</p>
260+
<div class="danmuCon">
261+
<div class="danUI">
262+
<div></div>
263+
<div></div>
264+
</div>
265+
<div class="danText"></div>
266+
<div ckass="danEmoji"></div>
267+
</div>
268+
269+
</div>
270+
</div>
271+
</div>
272+
<div class="swiper-slide">
273+
<video src="src/video/video-2.mp4" height="700"></video>
274+
<div class="control">
275+
<div class="progress-line"></div>
276+
<div class="control-set"></div>
277+
</div>
278+
</div>
279+
<div class="swiper-slide">
280+
<video src="src/video/video-3.mp4" height="700"></video>
281+
<div class="control">
282+
<div class="progress-line"></div>
283+
<div class="control-set"></div>
284+
</div>
285+
</div>
286+
<div class="swiper-slide">
287+
<video src="src/video/video-4.mp4" height="700"></video>
288+
<div class="control">
289+
<div class="progress-line"></div>
290+
<div class="control-set"></div>
291+
</div>
292+
</div>
293+
<div class="swiper-slide">
294+
<video src="src/video/video-5.mp4" height="700"></video>
295+
<div class="control">
296+
<div class="progress-line"></div>
297+
<div class="control-set">
298+
</div>
299+
</div>
300+
</div>
301+
</div>
302+
</div>
303+
304+
229305
</div>
230306
</div>
231307

308+
<script src="dist/swiper/swiper-bundle.min.js"></script>
309+
<script>
310+
var mySwiper = new Swiper('.swiper', {
311+
direction: 'vertical', // 垂直切换选项
312+
loop: true, // 循环模式选项
313+
touchiAngle: 10,
314+
315+
on: {
316+
touchMoveOpposite() {
317+
}
318+
},
319+
320+
});
321+
</script>
232322
<script src="script/sideBar.js" type="module"></script>
323+
<script src="script/video.js"></script>
233324
</body>
234325

235326
</html>

Diff for: ‎script/video.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
const swiper = document.querySelector('.swiper-slide');
2+
const videos = document.querySelectorAll('.swiper-wrapper video');
3+
let isPlay = true;
4+
5+
function togPlay(video) {
6+
if (isPlay) {
7+
video.pause();
8+
isPlay = false;
9+
}
10+
else {
11+
video.play();
12+
isPlay = true;
13+
}
14+
}
15+
16+
function getVideo() {
17+
return videos[mySwiper.realIndex];
18+
}
19+
// 鼠标滚轮切换视频
20+
21+
swiper.addEventListener('wheel', (e) => {
22+
let video = getVideo();
23+
video.pause();
24+
if (e.deltaY > 0) {
25+
mySwiper.slideNext();
26+
}
27+
else if (e.deltaY < 0) {
28+
mySwiper.slidePrev();
29+
}
30+
video = getVideo();
31+
video.play();
32+
isPlay = true;
33+
})
34+
// 上下键切换视频,空格开关视频
35+
swiper.addEventListener('keydown', (e) => {
36+
let video = getVideo();
37+
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
38+
video.pause();
39+
if (e.key === 'ArrowDown') {
40+
mySwiper.slideNext();
41+
}
42+
else if (e.key === 'ArrowUp') {
43+
mySwiper.slidePrev();
44+
}
45+
video = getVideo();
46+
video.play();
47+
isPlay = true;
48+
}
49+
else if (e.key === ' ') {
50+
togPlay(video);
51+
}
52+
e.preventDefault();
53+
54+
})
55+
swiper.addEventListener('click', function () {
56+
togPlay(getVideo());
57+
})
58+
59+
$('.control-set').each(function () {
60+
$(this).append(`<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" width="32"
61+
height="32" focusable="false" style="font-size:32px">
62+
<path
63+
d="M23.5 15.134C24.1667 15.5189 24.1667 16.4811 23.5 16.866L12.25 23.3612C11.5833 23.7461 10.75 23.265 10.75 22.4952L10.75 9.50481C10.75 8.73501 11.5833 8.25388 12.25 8.63878L23.5 15.134Z"
64+
fill="white"></path>
65+
</svg>`)
66+
})

Diff for: ‎src/video/video-1.mp4

18.3 MB
Binary file not shown.

Diff for: ‎src/video/video-2.mp4

35.9 MB
Binary file not shown.

Diff for: ‎src/video/video-3.mp4

89 MB
Binary file not shown.

Diff for: ‎src/video/video-4.mp4

16.3 MB
Binary file not shown.

Diff for: ‎src/video/video-5.mp4

10.4 MB
Binary file not shown.

0 commit comments

Comments
 (0)