Bạn muốn tạo một trình phát video thú vị bằng HTML 5? Kiểm tra Trình phát video HTML này với JavaScript và CSS, Tính năng danh sách phát nâng cao. Nhận mã nguồn ngay bây giờ.
Bạn đang xem : mã html của trình phát đa phương tiện
Làm cách nào chúng ta có thể tạo trình phát video nâng cao bằng HTML, CSS và JavaScript? Giải pháp: Trình phát video HTML Với JavaScript và CSS, Đi kèm với Tính năng Danh sách phát Nâng cao.
Trước khi phát hành HTML 5, video chỉ có thể phát trên trang web có plugin như flash. HTML 5 đi kèm với phần tử & lt; video & gt; để nhúng video vào trang web. Có một thẻ riêng cho video , giờ đây, việc đặt bất kỳ video nào trên một trang web là quá dễ dàng. Ngoài ra, chúng tôi có thể sửa đổi trình phát video bằng cách sử dụng CSS & amp; JS .
Hôm nay, bạn sẽ học cách tạo trình phát video nâng cao với danh sách phát. Về cơ bản, đây là HTML & lt; video & gt; trình phát dựa trên phần tử nhưng có rất nhiều sửa đổi . Tính năng đặc biệt của trình phát này là có nhiều video và tất cả video được liệt kê giống như danh sách phát . Ngoài ra, một điều cơ bản nhưng hữu ích là chúng ta có thể sử dụng hình ảnh hình thu nhỏ tùy chỉnh cho video.
Vì vậy, hôm nay tôi chia sẻ Trình phát video HTML với JavaScript và CSS . Tôi đã nói rằng đây là một trình phát video nâng cao , hãy để tôi cho bạn biết tất cả các tính năng. Trình phát này có tính năng bật / tắt , hình thu nhỏ tùy chỉnh, tiêu đề, mô tả, danh sách phát, giao diện người dùng điều khiển âm thanh tùy chỉnh, v.v. Chương trình này được lấy cảm hứng từ Bài đăng trên Reddit. Có chức năng JS cho mỗi tính năng, bạn có thể hiểu nếu bạn có kiến thức tốt về JavaScript .
Nếu bây giờ bạn đang nghĩ về cách Trình phát video nâng cao có danh sách phát này thực sự là vậy, sau đó xem bản xem trước được cung cấp bên dưới.
Xem trước Danh sách phát nâng cao Trình phát nổi bật
Xem bản xem trước video này để biết cách trình phát trông giống như.
Bản trình diễn trực tiếp
Bây giờ bạn có thể thấy điều này một cách trực quan, Bạn cũng có thể xem trực tiếp bằng cách nhấn vào nút xem trực tiếp ở trên. Nếu bạn thích điều này, hãy lấy mã nguồn của nó.
Bạn cũng có thể thích:
Trình phát video HTML với mã nguồn JavaScript và CSS
Trước khi chia sẻ mã nguồn , hãy nói về nó. Như bạn biết, tôi đã sử dụng HTML & lt; video & gt; tag để nhúng tất cả các video. Những video này không có âm thanh, đó là lý do tại sao bạn có thể nghe thấy bất kỳ âm thanh nào. Bạn có thể đặt video và hình thu nhỏ của riêng mình. Để đặt hình thu nhỏ tùy chỉnh, tôi đã sử dụng thuộc tính áp phích video HTML , trông giống như sau: & lt; video src = “MyVideo.mp4” poster = “image.jpg” & gt; .
Để tạo biểu tượng, tôi đã sử dụng các biểu tượng có phông chữ tuyệt vời nhưng sử dụng Weloveiconfonts . Ngoài ra còn có thanh tiến trình để trực quan hóa thời lượng video & amp; bạn có thể chuyển trực tiếp trên bất kỳ dấu thời gian nào. Trong tệp CSS , tôi đã quản lý tất cả các kiểu, màu sắc, vị trí, v.v. Có nhiều dòng mã CSS cơ bản. Như bạn có thể thấy trong bản xem trước, Tiêu đề của mỗi v iđo thay đổi động ở phần tử trên cùng.
Sử dụng JavaScript Tôi đã quản lý tất cả các điều khiển. Tôi đã tìm nạp tất cả ID và lớp bằng JavaScrip el. el chỉ là một định danh và nó đề cập đến một phần tử, một phần tử DOM, là một quy ước trong thư viện đó. Có thể nếu ai đó có kỹ năng tốt về JS , họ có thể hiểu các mã. Tôi không thể giải thích tất cả mọi thứ bằng văn bản. Bạn có thể hiểu các chức năng, sau khi nhận mã .
Để tạo chương trình này, bạn phải tạo 3 tệp. Đầu tiên cho HTML , thứ hai cho CSS và thứ ba cho JS . Làm theo các bước để tạo tệp này mà không gặp bất kỳ lỗi nào.
index.html
Tạo tệp HTML có tên ‘ index.html ‘ và đặt các mã được cung cấp tại đây bên dưới.
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 < / p>
31
32
33 < / p>
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50 < / p>
51
52
53 < / p>
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
>
90
91
92
93
94
95
96
97
98
99
100
101
102
103
& lt;! DOCTYPE html & gt;
& lt;! – Mã của Webdevtrick (https://webdevtrick.com) – & gt ;
& lt; html
< p class = "crayon-e"> lang
=
“vi”
& gt;
& lt; head & gt;
< / p>
& lt; meta
bộ ký tự
=
“UTF-8”
& gt;
& lt; title & gt;
Trình phát video HTML Advance | Webdevtrick.com
& lt; / title & gt;
& lt; link
href
< p class = "crayon-o"> =
‘https://fonts.googleapis.com/css?family=Source+Sans+Pro:200.400.600.700’
rel
=
‘stylesheet’
type
=
‘text / css’
& gt;
& lt; link
rel
=
“bảng định kiểu”
href
=
” https://cdnjs.cloudflare.com/ajax/libs/normaliz e / 5.0.0 / normalize.min.css “
& gt;
& lt; link
rel
=
“bảng định kiểu”
href
=
“./ style.css”
& gt;
& lt; / head & gt ;
& lt; body & gt;
& lt; main
class
=
“site-content”
& gt;
& lt; section
< p class = "crayon-e"> class
=
“video-area”
& gt;
& lt; div
class
=
” wrapper “
& gt;
< p class = "crayon-i">
& lt; header
class
=
” video -header “
& gt;
& lt; h2
lớp
=
“video-title”
& gt;
Trình phát video HTML 5
& lt; / h2 & gt;
& lt; small
lớp
=
“video-author”
& gt;
Code By
& lt; a
href
=
” https://webdevtrick.com/ “
& gt;
WebDevTrick
& lt; / a & gt;
& lt; / small & gt;
& lt; / header & gt;
< / p>
& lt; div
lớp
=
“video-column”
& gt;
& lt; div
class
=
“video-player”
& gt;
& lt; nút
id
=
“btnReplay”
lớp
=
“btn-replay”
& gt;
& lt; span
class
=
” fontawesome-refresh “
& gt;
& lt; / span & gt;
& lt; / button & gt;
& lt; video
id
=
“video”
lớp
=
“video”
src
=
“https://webdevtrick.com/wp-content/uploads/horizontal-scrolling-menu-bar.mp4”
loại
=
“video / mp4”
áp phích
=
” https://webdevtrick.com/wp-content/uploads/horizontal-scroll-navigation.jpg “
tải trước
=
” none “
& gt;
& lt; / video & gt;
& lt; div
clas s
=
“video-control”
& gt ;
& lt; button
id
=
” btnState “
& gt;
& lt; span
lớp
=
“fontawesome-play”
& gt;
& lt; / span & gt;
& lt; / button & gt;
& lt; span
id
=
“timePlayed”
& gt;
00:00
& lt; / span & gt;
& lt; div
lớp
=
“video-bar”
& gt;
& lt; input
gõ
=
” phạm vi “
id
=
“barSeeker”
lớp
=
“bar-seeker”
giá trị
=
“0”
min
=
“0”
max
=
“100”
bước
=
” 0,1 “
& gt;
& lt; tiến độ
value
=
< p class = "crayon-s"> “0”
max
=
” 100 “
bước
=
“0,1”
id
=
“barProgress”
class
=
“bar-process”
& gt;
& lt; / process & gt;
& lt; tiến độ
value
= < / p>
“0”
max
< p class = "crayon-o"> =
“100”
bước
=
” 0,1 “
id
=
” barBuffer “< / p>
class
=
“bar-buffer”
& gt;
& lt; / process & gt;
& lt; / div & gt; < / p>
& lt; div
id
=
” timeBubble “
class
=
“time-bubble” < / p>
& gt;
00:00
& lt; / div & gt ;
& lt; span
id
=
” timeDuration “
& gt;
00:00
& lt; / span & gt;
& lt; button
id
=
< p class = "crayon-s"> “btnSound”
class
=
” btn-sound “
& gt;
& lt; span
lớp
=
” fontawesome-volume-up “
& gt;
& lt; / span & gt;
& lt; / button & gt;
& lt; input
type
=
” range “
id
=
“sliderVolume”
class
=
“slider-volume”
value
=
“10”
min
=
“0”
max
=
“10”
& gt;
& lt; / div & gt;
& lt; / div & gt;
< p class = "crayon-line" id = "urvanov-Cú pháp-highlighter-62b3de1cc089d634925206-51">
& lt; div
class
=
“video-info”
& gt;
& lt; div
lớp
=
“mô tả”
& gt; < / p>
& lt; p & gt;
Làm cách nào để tạo thanh điều hướng cuộn bằng HTML và CSS? Giải pháp: Điều hướng cuộn ngang bằng HTML CSS, Thanh menu cuộn.
& lt; / p & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
< p class = "crayon-r"> & lt; div
id
=
“danh sách phát”
class < / p>
=
“danh sách phát”
& gt;
& lt; header
class
=
” tiếp theo “
& gt;
Bắt đầu Tiếp theo
& lt; / header & gt;
& lt; a
href
=
“https://webdevtrick.com/wp-content/ uploads / clip-path-animation-hover.mp4 “
class
=
” next-video “
& gt;
< p class = "crayon-lin e crayon-sọc-line "id =" urvanov-cú pháp-highlighter-62b3de1cc089d634925206-64 ">
& lt; img
src
=
“https://webdevtrick.com /wp-content/uploads/css-clip-path-animation-card.jpg”
alt
=
“”
& gt;
< / p>
& lt; h3
lớp
=
“single- video-title “
& gt;
CSS Clip-Path
& lt; / h3 & gt;
& lt; p
class
=
“single-video-info”
& gt;
Đã xây dựng trong CSS thuần túy
& lt; / p & gt;
& lt; span
lớp
< p class = "crayon-o"> =
“single-video-des”
& gt;
Làm cách nào để tạo thẻ hiệu ứng di chuột động bằng CSS clip-path? Giải pháp: Thẻ hoạt ảnh đường dẫn clip CSS, Thẻ di chuột qua đường dẫn clip.
& lt; / span & gt;
& lt; / p & gt;
& lt; / a & gt;
& lt; a
href
< p class = "crayon-o"> =
“https://webdevtrick.com/wp-content/uploads/animated-bar-graphs-javascript.mp4” < / p>
lớp
=
“video tiếp theo”
& gt;
& lt ; img
src
=
“https://webdevtrick.com/wp-content/uploads/javascript-animated-bar-graph.jpg”
< / p>
alt
=
“”
< p class = "crayon-r"> & gt;
& lt; h3
lớp
=
” single-video-title “
& gt;
Biểu đồ thanh
& lt; / h3 & gt;
& lt; p
class < / p>
=
“single-video-info”
& gt ;
Được xây dựng bằng JavaScript
& lt; / p & gt;
& lt; span
class
=
” single-video-des “
& gt;
Cách chúng tôi có thể tạo Đồ thị Thanh với Hoạt ảnh bằng JavaScript, HTML, & amp; CSS? Giải pháp: JavaScript Animated Bar Graph. Trong Các Từ Khác, Biểu Đồ Thanh Có Hiệu Ứng Hoạt Hình.
& lt; / span & gt;
& lt; / p & gt;
& lt; / a & gt;
& lt; a
href
=
“https://webdevtrick.com/wp-content/uploads/animated-login-page-design.mp4”
lớp
=
” video tiếp theo “
& gt;
& lt; img
src
=
” https://webdevtrick.com/wp-content/uploads/login- page-in-html-css.jpg “
alt
=
” “
& gt;
& lt; h3
class
=
“single-video-title”
< p class = "crayon-r"> & gt;
Trang đăng nhập
& lt; / h3 & gt;
& lt; p
lớp
=
“single-video-info”
& gt;
HTML thuần túy & amp; CSS
& lt; / p & gt;
& lt; span
lớp
=
“single-video-des”
& gt;
< p class = "crayon-i"> Làm cách nào chúng ta có thể tạo thiết kế trang đăng nhập hoạt hình bằng HTML và CSS? Giải pháp: Trang đăng nhập hoạt ảnh trong HTML CSS, Ví dụ và Mã nguồn.
& lt; / span & gt;
& lt; / p & gt;
& lt; / a & gt;
& lt; a
href
< p class = "crayon-o"> =
“https://webdevtrick.com/wp-content/uploads/horiz nha-scrolling-menu-bar.mp4” < / p>
lớp
=
“video play-video tiếp theo”
& gt;
& lt; img
src
=
“https://webdevtrick.com/wp-content/uploads /horizontal-scroll-navigation.jpg”
alt
=
” “
& gt;
& lt; h3
class
=
“single-video-title” < / p>
& gt;
Menu Cuộn ngang
& lt; / h3 & gt ;
& lt; p
lớp
=
“single-video-info”
& gt;
Tích hợp HTML CSS
& lt; / p & gt;
& lt; span
class < / p>
=
“single-video-des”
& gt ;
Làm cách nào để tạo thanh điều hướng cuộn bằng HTML và CSS? Giải pháp: Điều hướng cuộn ngang bằng HTML CSS, Thanh menu cuộn.
& lt; / span & gt;
& lt; / p & gt ;
& lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; / section & gt ;
& lt; / main & gt;
& lt; script
src
=
“function.js”
& gt;
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;
style.css
Bây giờ, hãy tạo một tệp CSS có tên ‘ style.css ‘ và đặt các mã được cung cấp tại đây.
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 < / p>
35
36
37 < / p>
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100 < / p>
101
102
103 < / p>
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120 < / p>
121
122
123
124
125
126 < / p>
127
128
129 < / p>
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146 < / p>
147
148
149
150
151
152 < / p>
153
154
155 < / p>
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172 < / p>
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250 < / p>
251
252
253 < / p>
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270 < / p>
271
272
273 < / p>
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
< p class = "crayon-num"> 291
292
293
< p class = "crayon-num crayon-sọc-num"> 294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379 < / p>
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396 < / p>
397
398
399 < / p>
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
< p class = "crayon-num"> 417
418
419
< p class = "crayon-num crayon-sọc-num"> 420
421
422
/ ** Mã của Webdevtrick (https: // webdevtrick. com) ** /
@ import url (https://weloveiconfonts.com/api/?family=fontawesome);
[class * =” fontawesome – “]: trước
{
font-family
:
‘FontAwesome’
,
sans -serif
;
}
body
{
background
:
# e8eaed
;
font
:
< p class = "crayon-h">
16px / 1.5
” Nguồn Sans Pro “
,
” Helvetica Neue “
,
Arial ,
sans-serif
;
}
img
{
max-width
:
100%
;
}
< / p>
h2
{
font-weight
:
400
;
font-size
:
1.5rem
;
}
a
{
color
:
inherit
;
text-decoration
:
không có
;
< / p>
box-shadow
:
chèn
0px < / p>
– 1px
0px
rgba
(
255,
255,
255,
0,5
)
;
chuyển tiếp
:
tất cả
0,5 giây
;
}
a: hover
{
box-shadow
:
chèn
0px
– 24px
0px
# 61b5d9
;
< p class = "crayon-line" id = "urvanov-cú pháp-highlighter-62b3de1cc089f943932214-25">
}
. wrapper
{
margin
:
0
auto
;
padding
:
0
1em
;
max-width
:
69rem
;
}
. tr uniate, .video-title, .single-video-title, .single-video-info
{
box-sizing
:
border-box
;
tràn
:
hidden
;
text-tràn
:
dấu chấm lửng
;
white-space
:
nowrap
;
width
:
100%
;
}
. video-area
{
< p class = "crayon-e"> – webkit-animation-delay
:
0,5 giây
;
animation-delay
:
0,5 giây
;
– webkit-animation-fill-mode
:
cả
;
animation-fill-mode
:
cả
;
màu
:
# fff
;
padding
:
4.5rem
0
;
}
. Video-column
{
float
:
trái
; < / p>
max-width
:
< p class = "crayon-h">
854px
;
}
. video-player
{
background
:
# 000
;
vị trí
:
họ hàng
;
tràn
:
ẩn
;
width
:
100%
;
height
:
480px
;
}
. video
{
display
:
khối
;
con trỏ
:
con trỏ
;
width
:
100%
;
vị trí
:
tương đối
;
top
:
50%
;
– webkit-biến đổi
:
dịchY
(
– 50%
)
;
< / p>
biến đổi
:
translateY
(
– 50%
)
;
}
. danh sách phát
{
float
:
đúng
;
font-size
:
18px
;
font-weight
:
600
;
max-width
:
250px
;
} < / p> < / p>
{
background
:
< / p>
# e60023
;
line-height
:
1.5rem
;
padding
:
< p class = "crayon-h">
1.5rem
;
}
. video-title
{
float
:
trái
;
margin
:
< p class = "crayon-h">
0
;
width
:
auto
;
max-width
:
75%
;
}
. Video-author
{
font-size
:
18px
;
float
:
left
;
margin-left
: < / p>
3rem
;
}
. description
{
color
:
# 212121
;
}
. video-author a: hover
{
< / p>
box-shadow
:
< p class = "crayon-i"> in
0px
– 24px
0px
# 212121
;
}
. video-control
{
định cỡ hộp
:
border-box
;
background
:
< p class = "crayon-h">
rgb
(
33,33,33,
0,8
)
;
line-height
:
3rem
;
padding
:
0
< / p>
1.5rem
;
vị trí
:
tuyệt đối
;
< / p>
bottom
:
0
;
– webkit-biến đổi
:
translate3d
(
0,
3rem,
0
)
;
biến đổi
:
translate3d
(
0,
3rem ,
0
)
;
width
:
100%
;
height
:
3rem
; < / p>
vertical-align
:
middle
;
chuyển tiếp
:
– webkit-biến đổi
0,5 giây
;
chuyển tiếp
:
biến đổi
0,5 giây
;
chuyển tiếp
:
biến đổi
0,5 giây,
– webkit-biến đổi
0,5 giây
;
}
.video-control button
{
background
:
0
;
border
:
0
;
màu
:
# fff
;
font-size
:
1.5rem
;
width
:
3rem
;
height
:
3rem
;
vertical-align
:
middle
;
}
. video-player: hover .video-control
{
< / p>
– webkit-biến đổi
:
translate3d
(
0,
0,
0
)
;
biến đổi
:
translate3d
(
0,
0,
0
)
;
}
. video-bar
{
background
:
rgb
(
33,33,33,
0,8
)
;
display
:
inline-block
;
margin
:
0
1em
;
vị trí
:
họ hàng
;
width
:
73%
;
chiều cao
:
8px
;
}
. bar-seeker,
. bar-process,
.bar-buffer
{
vị trí
:
< p class = "cray on-h ">
tuyệt đối
;
height
:
8px
;
}
. bar-seeker
{
z-index
:
< / p>
1000
;
}
. bar-process
{< / p>
z-index
:
100
;
}
. bar-buffer
{
z-index
:
10
;
< / p>
}
input [type = range]
{
background
:
trong suốt
;
con trỏ
:
pointer
;
< p class = "crayon-h">
– webkit-ngoại hình
:
không có
;
width
:
100%
;
}
input [type = range] :: – webkit-slider-runnable-track
{
– webkit-ngoại hình
:
none
;
}
input [type = range] :: – webkit-slider- ngón tay cái
{
– webkit-ngoại hình
:
< p class = "crayon-h">
không có
;
}
input [type = range]: focus
{
phác thảo
:
không có
;
< p class = "crayon-line crayon-sọc-line" id = "urvanov-cú pháp-highlighter-62b3de1cc089f943932214-160">
}
input [type = range] :: – ms-track
{
width
:
100%
;
con trỏ
:
con trỏ
;
background
:
trong suốt
;
border-color
:
trong suốt
;
màu
:
trong suốt
;
}
. Bar-seeker :: – ms-fill-low
{
background
:
trong suốt
;
}
. bar-seeker :: – ms-fill-upper
{
background
:
trong suốt
;
}
. bar-seeker :: – webkit-slider-runnable-track
{
background
< p class = "crayon-sy">:
trong suốt
;
height
:
8px
;
padding
:
< p class = "crayon-h">
0
;
}
. bar-seeker :: – moz-range-track
{
background
:
trong suốt
;
height
: < / p>
8px
;
padding
:
0
;
}
. Bar-seeker :: – ms-track
{
background
< p class = "crayon-sy">:
trong suốt
;
height
:
8px
;
padding
:
< p class = "crayon-h">
0
;
}
. bar-seeker :: – webkit -slider-thumb
{
background
:
< p class = "crayon-h">
# ff3c3c
;
border
:
0
;
bán kính đường viền
:
100%
;
< p class = "crayon-e"> width
:
18px
;
height
:
< p class = "crayon-h">
18px
;
margin-top
:
– 4px
;
}
. bar-seeker :: – moz- range-thumb
{
background
:
# ff3c3c
;
border
< p class = "crayon-sy">:
0
;
border-radius
:
100%
;
width
:
18px
;
height
:
18px < / p>
;
margin-top
:
– 4px
;
}
. bar-seeker :: – ms-thumb
{
background
:
# ff3c3c
;
border
: < / p>
0
;
border-radius
:
100 %
;
width
:
18px
;
height
:
18px
;
margin-top
:
– 4px
;
}
@ media all và (-ms-high-Contra: không có), (-ms-high-Contra: active)
{
. Bar-seeker
{
height
:
24px
;
< p class = "crayon-h">
margin-top
:
– 5px
;
padding
:
0
;
vertical-align
:
middle
;
}
}
input.slider-volume
{
vị trí
:
tuyệt đối
;
bottom
:
36px < / p>
;
đúng
:
– 40px
;
width
:
6rem
;
độ mờ
:
0
;
– webkit-biến đổi
:
xoay
(
– 90deg
)
scaleX
(
0
)
;
biến đổi
:
xoay
(
– 90deg
)
scaleX
(
< p class = "crayon-i"> 0
)
;
– chúng tôi bkit -formation-origin
:
left < / p>
;
biến đổi-nguồn gốc
:
trái
;
chuyển tiếp
:
tất cả
1 giây
;
}
. slider-volume :: – webkit-slider-runnable-track
{
background
:
rgb
(
33 , 33,33,
0,8
) < / p>
;
height
:
< / p>
20px
;
}
. slider-volume :: – moz-range-track
{
background
:
rgb
(
33,33,33,
0,8
)
;
< p class = "crayon-line" id = "urvanov-Cú pháp-highlighter-62b3de1cc089f943932214-239">
height
:
20px
;
}
. slider-volume :: -ms-track
{
background
:
rgb
(
< p class = "crayon-i"> 33,33,33,
0,8
)
;
height
:
< p class = "crayon-h">
20px
;
}
. slider-volume :: – webkit-slider-thumb
{
background
:
< p class = "crayon-h">
# ff3c3c
;
border
:
0
;
width
:
< p class = "crayon-i"> 8px
;
height
:
24px
;
margin-top
: < / p>
– 2px
;
}
. slider-volume :: – moz-range-thumb
{
background
:
# ff3c3c
;
border
:
0
;
width
:
8px
;
height
:
24px
;
margin -top
:
– 2px
;
}
. slider-volume :: – ms-thumb
{
background
:
# ff3c3c
;
border
:
0
;
width
:
8px < / p>
;
height
:
< p class = "crayon-h">
24px
;
margin -top
:
– 2px
;
}
.btn-sound: hover + .slider-volume,
. slider-volume: hover
{
độ mờ
:
1
;
– webkit-biến đổi
:
xoay
(
– 90deg
)
< p class = "crayon-i"> scaleX
(
1
)
;
biến đổi
:
xoay
(
– 90deg
)
scaleX
(
1
)
;
< p class = "crayon-sy">}
tiến trình
{
– webkit-ngoại hình
:
không
;
-moz-ngoại hình
:
không
;
ngoại hình
:
< p class = "crayon-h">
không có
;
nền
:
trong suốt
;
color
:
rgba
(
255,
255,
255,
0,2
)
;
border
:
không
;
height
:
8px
;
width
:
100%
;
}
process :: – webkit-process-bar
{
background
:
trong suốt
;
}
process :: – webkit-process-value
{
background
:
< / p>
trong suốt
;
}
. bar-buffer :: – webkit-process-value
{
background
:
rgba
(
255,
255,
255,
0,2
)
;
}
. bar-buffer :: – moz-Progress-bar
{< / p>
< p class = "crayon-e"> background
:
rgba
(
255,
< / p>
255,
255,
< p class = "crayon-h">
0,2
)
;
}
. bar-process :: – webkit -progress-value
{
background
:
# ff3c3c
;
}
. bar-process :: – moz-process-bar
{
background
:
# ff3c3c
;
}
. bar-process
{
color
:
# ff3c3c
;
}
. btn-replay
{
background
:
không có
;
border
:
không có
;
display
:
không
;
< p class = "crayon-line" id = "urvanov-Cú pháp-highlighter-62b3de1cc089f943932214-307">
color
:
# ff3c3c
;
vị trí
:
tuyệt đối
;
đầu
:
50%
;
trái
:
50%
< p class = "crayon-sy">;
margin-left
:
– 110px
;
margin-top
:
– 110px
;
f ont-size
:
9rem
;
width
:
220px
;
height
:
220px
;
}
. time-bubble
{
background
:
< p class = "crayon-h">
# 61b5d9
;
border-radius
:
1.5rem
1.5rem
0px
;
height
:
1.5rem
;
line-height
:
1.5rem
;
< p class = "crayon-line crayon-sọc-line" id = "urvanov-cú pháp-highlighter-62b3de1cc089f943932214-322">
vị trí
:
tuyệt đối
;
bottom
:
3.2rem
;
trái
:
4.8rem
;
padding
:
0,5em
;
< p class = "crayon-h">
display
:
không có
;
}
. tiếp theo
{
background
:
# 212121
;
padding
:
< p class = "crayon-h">
16,5px
;
max-height
:
60px
;
}
. next-video < / p>
{
display
:
khối
;
height
:
140px
;
vị trí
:
tương đối
;
tràn
:
ẩn
;
}
. tiếp theo -video img
{
hiển thị
:
khối
;
}
. next-video :: before
{
background
:
linear-gradient
(
0deg,
< p class = "crayon-i"> rgb
(
33,33,33,
0,8
)
0%,
trong suốt
60%
) < / p>
;
nội dung
:
” “
;
width
:
100%
;
height
:
100%
;
vị trí
< p class = "crayon-sy">:
tuyệt đối
;
chuyển tiếp
:
tất cả
0,5 giây
;
}
. single-video-title
{
vị trí
:
< p class = "crayon-h">
tuyệt đối
;
– webkit-biến đổi
:
dịchY
(
– 4,5rem
)
;
biến đổi
:
translateY
(
– 4,5rem
)
;
padding
:
< p class = "crayon-h">
0,75rem
1.5rem
;
chuyển tiếp
:
tất cả
0,5 giây
;
}
. single-video-info
{
định cỡ hộp
:
border-box
;
font-size
:
14px
;
font-weight
:
400
;
< p class = "crayon-line" id = "urvanov-cú pháp-highlighter-62b3de1cc089f943932214-361">
padding
:
0,75rem
1.5rem
;
vị trí
:
tuyệt đối
;
– webkit-biến đổi
:
translateY
(
– 6,75rem
)
;
biến đổi
:
translateY
(
– 6.75rem
)
;
chuyển tiếp
:
tất cả
0,5 giây
;
độ mờ
:
0
;
width
:
100%
;
}
. Next-video: hover .single-video-title
{
-webkit-biến đổi
:
dịchY
(
– 9.75rem
)
;
biến đổi
:
translateY
(
– 9,75rem
)
;
}
. next-video: hover :: before
{
< p class = "crayon-line crayon-sọc-line" id = "urvanov-cú pháp-highlighter-62b3de1cc089f943932214-374">
background
:
rgb
(
33,33,33,
< p class = "crayon-i"> 0,7
)
;
}
. next-video: hover .single-video-info
{
độ mờ
:
1
;
}
. play-video
{
< / p>
– webkit-biến đổi
:
thang đo
(
0
)
;
biến đổi
:
scale
(
0
)
;
height
:
0
;
chiều rộng
:
0
;
}
. info-area
{
nền
:
# fff
< p class = "crayon-sy">;
màu
:
< p class = "crayon-i"> # 212121
;
}
. Info-header
{
color
:
# 61b5d9
;
font-size
:
3rem
;
font-weight
:
300
;
text-align
:
center
;
margin
: < / p>
4.5rem
auto
;
}
. clearfix: trước, .wrapper: trước,. video-header: before, .clearfix: after, .wrapper: after, .video-header: after
{
content
:
“”
;
< / p>
display
:
bảng
;
}
.clearfix: after, .wrapper: after, .video-header: after
{
clear
:
cả
;
}
< / p>
@ – webkit-keyframes bottomSlide
{
0%
{
– webkit- biến đổi
:
translate3d
< p class = "crayon-sy"> (
0,
100%,
0
)
;
biến đổi
:
translate3d
(
0,
100%,
0
)
;
độ mờ
:
1
;
}
< / p>
100%
{
độ mờ
:
1
;
}
}
@keyframes bottomSlide
{
0%
{
< / p>
-webkit-biến đổi
:
translate3d
(
0,
100%,
0
)
;
biến đổi
:
translate3d
(
0,
100%,
0
)
;
độ mờ
:
1
;
}
100%
{
độ mờ
:
1
;
}
}
function.js
Bước cuối cùng, tạo một tệp JavaScript có tên ‘ function.js ‘và nhập mã.
function.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68 < / p>
69
70
71 < / p>
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88 < / p>
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
>
119
120
121
>
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
>
139
140
141
>
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
/ * Mã của Webdevtrick (https://webdevtrick.com) * /
var
videoPlayer
=
function
(
)
{
“sử dụng nghiêm ngặt”
;
chức năng
el
(
id
)
{
trả lại
tài liệu
.
getElementById
(
id
)
;
}
var
vid
=
el
(
” video “< / p>
)
,
btnState
=
el
(
“btnState”
)
,
btnReplay
=
el
(
“btnReplay”
)
,
< / p>
btnSound
=
el
(
“btnSound”
)
,
sliderVolume
=
el
(
“sliderVolume”
)
,
barSeeker
=
el
(
“barSeeker”
)
,
barBuffer
=
el
(
“barBuffer”
)
,
barProgress
< p class = "crayon-o"> =
el
(
” barProgress “
)
,
timePla yed
=
el
(
“timePlayed”
)
,
timeDuration
=
el
(
“timeDuration”
)
,
timeBubble
=
el
(
“timeBubble”
)
,
thePosition
,
theMinutes
,
theSeconds
,
theTime
;
var
readableTime
=
function
(
t
)
{
theMinutes
=
” 0 “
+
Toán
.
tầng
(
t
/
60
) < / p>
;
// Chia giây để lấy phút, thêm số 0 ở đầu
theSeconds
=
” 0 “
+
parseInt
(
t
%
60
>
)
;
// Lấy giây còn lại
theTime
=
theMinutes
.
lát
(
–
2
)
+
“: “
+
theSeconds
.
lát
(
–
2
) < / p>
;
// Cắt thành hai chỗ để xóa thừa số không
quay lại
theTime
;
}
;
/ * Điều khiển video * /
var
bật tắt Chơi
=
chức năng
(
)
{
nếu
(
vid
.
tạm dừng
)
{
vid
.
chơi
(
)
;
btnState
.
firstElementChild
.
className
< / p>
=
“fontawesome-pause”
;
btnReplay
.
style
.
hiển thị
=
“none”
;
vid
.
style
.
độ mờ
=
1
;
}
else
{
vid
.
tạm dừng
(
)
;
btnState
. < / p>
firstElementChild
.
className
=
“fontawesome-play”
;
}
}
;
var
toggleSound
=
function < / p>
(
)
{
nếu
(
vid
.
< p class = "crayon-v"> bị tắt tiếng
)
{
vid
.
tắt tiếng
< p class = "crayon-h">
=
false
;
< p class = "crayon-h">
sliderVolume
.
giá trị
=
10
;
btnSound
.
firstElementChild
.
className
=
” fontawesome-volume-up “
;
}
else
{
vid
.
bị tắt tiếng
=
true
;
sliderVolume
.
value
=
0
;
btnSound
.
firstElementChild
.
className
=
” fontawesome-volume-off “
;
}
}
;
/ * Cập nhật giá trị người tìm kiếm và thời gian đã phát * /
var
updateTimeDisplay
=
function
(
)
{
var
timePercent
=
(
100
< / p>
/
vid
.
thời lượng
)
*
vid
.
currentTime
;
barSeeker
.
value
=
timePercent
;
barProgress
.
value
=
timePercent
;
time Đã phát
.
innerHTML
=
readableTime
(
vid
.
currentTime
)
;
}
;
var
replayVideo
=
chức năng
(
)
{
vid
.
currentTime
=
0
;
btnState
.
firstElementChild
.
className
=
“fontawesome-pause”
< p class = "crayon-sy">;
btnReplay
.
style
.
hiển thị
=
< p class = "crayon-h">
“none”
;
< p class = "crayon-line crayon-sọc-line" id = "urvanov-cú pháp-highlighter-62b3de1cc08a2479691706-74">
vid
.
chơi
(
)
;
}
;
// Nút chuyển đổi
vid
.
addEventListener
(
“nhấp”
,
bật tắt Phát
< p class = "crayon-sy">)
;
btnState
.
addEventListener
(
“click”
,
bật tắt Phát
)
;
< / p>
btnSound
.
addEventListener
(
“nhấp”
,
< p class = "crayon-v"> toggleSound
)
;
// Thanh trượt âm lượng
sliderVolume
.
addEventListener
(
“change” < / p>
,
hàm
(
)
{
var
theVolume
=
< p class = "crayon-v"> sliderVolume
.
value
/
10
;
vid
.
volume < / p>
=
theVolume
;
< p class = "crayon-st"> nếu
(
theVolume
= ==
0
)
{
btnSound
.
firstElementChild
.
className
=
” fontawesome-volume-off “
;
}
< p class = "crayon-st"> else
if
(
cái Âm lượng
===
1
)
{
btnSound
.
firstElementChild
.
className
=
” fontawesome-volume-up “
;
}
else
{
btnSound
.
firstElementChild
.
className
< / p>
=
“fontawesome-volume-down” < / p>
;
}
}
)
;
// Di chuyển thanh công cụ tìm kiếm
vid
. < / p>
addEventListener
(
“timeupdate”
,
updateTimeDisplay
)
;
// Cho phép nhấp vào người tìm kiếm để thay đổi vị trí video
< / p>
barSeeker
.
addEventListener
(
“thay đổi”
,
function
(
)
< p class = "crayon-sy"> {
thePosition
=
< p class = "crayon-h">
vid
.
thời lượng
*
(
barSeeker
.
giá trị
/
100
)
;
< / p>
vid
.
currentTime
=
thePosition
;
}
)
;
// Tạm dừng video và cập nhật người tìm kiếm trong khi người tìm kiếm đang được tương tác với
< / p>
barSeeker
.
addEventListener
(
“mousedown”
,
hàm
(
)
{
vid
< p class = "crayon-sy">.
tạm dừng
(
)
;
vid
.
removeEventListener
(
“timeupdate”
,
updateTimeDisplay
)
;
}
)
;
barSeeker
.
< p class = "crayon-e"> addEventListener
(
“mouseup”
,
function
(
)
{
vid
.
chơi
(
)
;
btnState
.
firstElementChild
.
className
< / p>
=
“fontawesome-pause”
;
vid
.
addEventListener
(
” timeupdate “
,
updateTimeDisplay
)
;
< / p>
}
)
;
// Thanh đệm
vid
.
addEventListener
(
” timeupdate “
,
hàm
(
)
{
var
bufferPercent
=
(
100
/
vid < / p>
.
thời lượng
)
*
vid
.
được đệm
.
end
(
vid
.
được đệm
.
length
–
< p class = "crayon-cn"> 1
)
;
barBuffer
.
value
< p class = "crayon-o"> =
bufferPercent
;
}
)
;
// Thời lượng video
vid
.
addEventListener
(
‘loaddata’
,
chức năng
(
)
{
timeDuration
.
innerHTML
=
readableTime
(
vid
.
thời lượng
)
;
< / p>
}
)
;
// Bong bóng thời gian trên trình tìm kiếm
var
bubblePop
=
hàm
(
e
)
{
var
cursorPos
=
(
e
.
clientX < / p>
–
(
barSeeker
.
getBoundsClientRect
(
)
.
còn lại
)
)
< p class = "crayon-o"> /
(
barSeeker
.
offsetWidth
) < / p>
;
var
seekTime < / p>
=
cursorPos
*
vid
.
thời lượng
< p class = "crayon-sy">;
if
(
seekTime
)
{
timeBubble
.
innerHTML
=
readableTime
(
seekTime
)
;
timeBubble
.
style
.
trái
=
(
e
.
clientX
–
barSeeker
.
getBashingClientRect
(
)
.
left < / p>
+
78
)
+
“px”
;
timeBubble
.
style
.
hiển thị
=
“block”
;
}
} < / p>
;
< p class = "crayon-line crayon-sọc-line" id = "urvanov-cú pháp-highlighter-62b3de1cc08a2479691706-140">
barSeeker
.
addEventListener
(
“mousemove”
,
bubblePop
)
;
< p class = "crayon-line crayon-sọc-line" id = "urvanov-cú pháp-highlighter-62b3de1cc08a2479691706-142">
barSeeker
.
addEventListener
(
“mouseout”
,
chức năng
(
)
{
timeBubble
.
style
.
display
=
“không có”
;
}
)
;
// Danh sách phát video
var < / p>
playlistAnchor
=
tài liệu
.
querySelectorAll
(
“. next-video “
)
,
imageURL
=
document
.
querySelectorAll
(
“. next-video img “
)
;
var
Trước đó
=
tài liệu
.
querySelector
(
“. video-title”
)
,
Trước đây Mô tả
=
document
.
querySelector
< p class = "crayon-sy"> (
“. description”
)
;
cho
(
var
i
=
0
;
i
& lt ;
4
;
< p class = "crayon-h">
i
++
)
{
(
chức năng
(
)
{
var
k
< / p>
=
i
;
playlistAnchor
[
i
]
.
addEventListener
(
” click “
,
chức năng
(
e
)
< p class = "crayon-sy"> {
e
.
PreventDefault
(
)
;
var
PlayVideo
=
tài liệu
.
querySelector
(
“. play-video”
)
;
PlayVideo
.
classList
.
xóa
(
“slide”
)
;
playVideo
.
classList
. < / p>
xóa
(
“play-video”
)
;
// Cập nhật video
vid
.
poster
=
imageURL
[
k
]
.
src
;
vid
< p class = "crayon-sy">.
src
=
playlistAnchor
[
k
]
.
href
;
// Cập nhật thông tin
prevTitle
.
innerHTML
=
cái này
.
querySelector
(
“. single-video-title”
)
.
textContent
;
Trước đây Mô tả
.
innerHTML
=
this
.
querySelector
(
“. single-video-des”
)
.
textContent
;
// Đặt lại và phát video
replayVideo
(
)
;
cái này
.
classList
.
thêm
(
“play-video”
)
;
playVideo
.
classList
.
a đ
(
“slide”
)
;
setTimeout
(
function
(
)
{
playlistAnchor
[
k
]
.
parentNode
.
appendChild
(
playlistAnchor
[
k < p class = "crayon-sy">]
)
;
}
,
500
< p class = "crayon-sy">)
;
}
)
;
} < / p>
(
)
)
;
}
}
(
)
;
Vậy là xong. Tôi đã đặt chiều cao tối đa của các phần tử của phần mã, bạn phải cuộn để xem tất cả các mã & amp; Ngoài ra, bạn có thể sao chép mã bằng cách sử dụng các nút được cung cấp ở phía trên bên phải của phần tử. Bây giờ bạn đã tạo thành công Trình phát video HTML có JavaScript và CSS, Tính năng danh sách phát nâng cao được tích hợp sẵn. Nếu bạn có bất kỳ nghi ngờ hoặc câu hỏi nào, hãy bình luận xuống bên dưới.
Cảm ơn bạn đã ghé thăm, hãy tiếp tục ghé thăm.
Xem thêm những thông tin liên quan đến chủ đề mã html của trình phát đa phương tiện
HTML – Giới thiệu một số thẻ ngữ nghĩa HTML5 và đa phương tiện
- Tác giả: Thanh Duong Huu
- Ngày đăng: 2021-07-15
- Đánh giá: 4 ⭐ ( 1244 lượt đánh giá )
- Khớp với kết quả tìm kiếm: HTML cơ bản
Đa phương tiện trong HTML (HTML Multimedia)
- Tác giả: laptrinhtudau.com
- Đánh giá: 5 ⭐ ( 9264 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Đa phương tiện là gì?, Định dạng da phương tiện, Các định dạng video phổ biến, Các định dạng video phổ biến
One moment, please…
- Tác giả: www.dammio.com
- Đánh giá: 3 ⭐ ( 9947 lượt đánh giá )
- Khớp với kết quả tìm kiếm:
Trình phát nhạc HTML Mã là gì? – LifeBytes
- Tác giả: vidabytes.com
- Đánh giá: 4 ⭐ ( 9759 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Trong suốt bài đăng này, bạn sẽ có thể học cách tạo trình phát nhạc của riêng mình bằng HTML; dựa trên mã thuần túy. Bằng cách đó, bạn sẽ không cần
Ngành Công nghệ đa phương tiện
- Tác giả: daotao.ptit.edu.vn
- Đánh giá: 5 ⭐ ( 6075 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Thông tin chi tiết về các ngành học tại Học viện Công nghệ Bưu chính Viễn thông
Nhúng đa phương tiện trong HTML
- Tác giả: vietjack.com
- Đánh giá: 4 ⭐ ( 8650 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Nhúng đa phương tiện trong HTML – Học HTML cơ bản và nâng cao theo các bước đơn giản và dễ hiểu từ HTML là gì, Tag trong HTML, HTML tag, thẻ trong HTML, tổng hợp các thẻ HTML cơ bản, thẻ meta, thuộc tính, định dạng, thẻ trong HTML, commemnt, font, marquee, hình ảnh, link, bảng, frame, danh sách, layout, màu, form, background, style sheet, và sử dụng javascript.
Nhúng đa phương tiện trong HTML, Thẻ embed trong HTML
- Tác giả: hoclaptrinh.vn
- Đánh giá: 3 ⭐ ( 7350 lượt đánh giá )
- Khớp với kết quả tìm kiếm: Nhúng đa phương tiện trong HTML, Thẻ embed trong HTML. Đôi khi bạn cần thêm video hoặc nhạc vào trong trang web của mình. Cách đơn giản nhất để thêm video hay âm thanh vào site của bạn là bao nó trong một thẻ HTML gọi là
Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình