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

=

” 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

Xem Thêm  SQL COUNT () với GROUP của - nhóm theo và đếm sql

By ads_php