Home Web Design HTML HTML Video Player With JavaScript and CSS | Advanced Playlist Feature

HTML Video Player With JavaScript and CSS | Advanced Playlist Feature

August 8, 2019

22658

How we can create an advanced video player using HTML, CSS, and JavaScript? Solution: HTML Video Player With JavaScript and CSS, Comes with Advance Playlist Feature.

Before releasing HTML 5, the video only could be played on the webpage with plug-in like flash. HTML 5 comes with <video> element to embed videos in the webpage. There is a separate tag for videos, now placing any video on a website is too easy. Also, we can modify the video player using CSS & JS.

Today you will learn to create an advanced video player with playlist. Basically, this is an HTML <video> element based player but there are lots of modification. The special feature of this player is there is more than one video, and all the videos listed like a playlist. Also, a basic but useful thing is we can use a custom thumbnail image for videos.

So, Today I am sharing HTML Video Player With JavaScript and CSS. I have said that this is an advance video player, let me tell you all the features. This player has a toggle on/off feature, custom thumbnail, title, description, playlist, custom sound control UI, etc. This program is inspired by a Reddit post. There are JS function for each feature, you can understand if you have good knowledge of JavaScript.

If you are thinking now how this Advanced Video Player with Playlist actually is, then see the preview given below.

Preview Of Advanced Playlist Featured Player

See this video preview to getting an idea of how the player looks like.

Live Demo

Now you can see this visually, You can also see live by pressing the live view button given above. If you like this, then get the source code of its.

HTML Video Player With JavaScript and CSS Source Code

Before sharing source code, let’s talk about it. As you know I have used HTML <video> tag for embedding all the videos. These videos have no sound, that’s why you can hear any sound. You can place your own videos and thumbnails. For placing custom thumbnail, I have used HTML video poster attribute, That looks like this: <video src="MyVideo.mp4" poster="image.jpg"> .

For creating icon I have used font-awesome icons but using weloveiconfonts. There is also a progress bar to visualize the video length & you can direct shift on any timestamp. In the CSS file, I have managed all the styles, colors, position, etc. There have many lines of basic CSS codes. As you can see in the preview, Title of each video change dynamically on the top element.

Using JavaScript I have managed all the controls. I have fetched all the ID and class using JavaScrip el. el is just an identifier and it refers to an element, a DOM element, which is a convention in that library. Maybe if someone has good skills in JS, they can understand the codes. I can’t explain all the things in writing. You can understand the functions, after getting the codes.

For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>HTML Advance Video Player | Webdevtrick.com</title>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>

<main class="site-content">

  <section class="video-area">
    <div class="wrapper">

      <header class="video-header">
        <h2 class="video-title">HTML 5 Video Player</h2>
        <small class="video-author">Code By <a href="https://webdevtrick.com/">WebDevTrick</a></small>
      </header>

      <div class="video-column">
        <div class="video-player">
          <button id="btnReplay" class="btn-replay"><span class="fontawesome-refresh"></span></button>

          <video id="video" class="video" src="https://webdevtrick.com/wp-content/uploads/horizontal-scrolling-menu-bar.mp4" type="video/mp4" poster="https://webdevtrick.com/wp-content/uploads/horizontal-scroll-navigation.jpg" preload="none">
                        </video>

          <div class="video-controls">

            <button id="btnState"><span class="fontawesome-play"></span></button>

            <span id="timePlayed">00:00</span>

            <div class="video-bars">
              <input type="range" id="barSeeker" class="bar-seeker" value="0" min="0" max="100" step="0.1">
              <progress value="0" max="100" step="0.1" id="barProgress" class="bar-progress"></progress>
              <progress value="0" max="100" step="0.1" id="barBuffer" class="bar-buffer"></progress>
            </div>

            <div id="timeBubble" class="time-bubble">00:00</div>

            <span id="timeDuration">00:00</span>

            <button id="btnSound" class="btn-sound"><span class="fontawesome-volume-up"></span></button>
            <input type="range" id="sliderVolume" class="slider-volume" value="10" min="0" max="10">

          </div>
        </div>

        <div class="video-info">

          <div class="description">
            <p>How we can create a scrolling navigation bar using HTML and CSS? Solution: Horizontal Scroll Navigation Using HTML CSS, Scrolling Menu Bar.</p>
          </div>
        </div>
      </div>

      <div id="playlist" class="playlist">
        <header class="next">Comming Next</header>

        <a href="https://webdevtrick.com/wp-content/uploads/clip-path-animation-hover.mp4" class="next-video">
          <img src="https://webdevtrick.com/wp-content/uploads/css-clip-path-animation-card.jpg" alt="">
          <h3 class="single-video-title">CSS Clip-Path</h3>
          <p class="single-video-info">Built in Pure CSS</p>
            <span class="single-video-des">How we can create an animated hover effect card using CSS clip-path? Solution: CSS Clip Path Animation Card, Clip-Path Hover Cards.

            </span></p>
        </a>

        <a href="https://webdevtrick.com/wp-content/uploads/animated-bar-graphs-javascript.mp4" class="next-video">
          <img src="https://webdevtrick.com/wp-content/uploads/javascript-animated-bar-graph.jpg" alt="">
          <h3 class="single-video-title">Bar Graphs</h3>
          <p class="single-video-info">Built in JavaScript </p>
          <span class="single-video-des">How we can create Bar Graphs With Animation using JavaScript, HTML, & CSS? Solution: JavaScript Animated Bar Graph. In Other Words, Bar Chart With Animation Effects.

            </span></p>
        </a>

        <a href="https://webdevtrick.com/wp-content/uploads/animated-login-page-design.mp4" class="next-video">
          <img src="https://webdevtrick.com/wp-content/uploads/login-page-in-html-css.jpg" alt="">
          <h3 class="single-video-title">Login Page</h3>
          <p class="single-video-info">Pure HTML & CSS </p>
            <span class="single-video-des">How we can create an animated login page design using HTML and CSS? Solution: Animated Login Page In HTML CSS, Example and Source Code.

            </span></p>
        </a>

        <a href="https://webdevtrick.com/wp-content/uploads/horizontal-scrolling-menu-bar.mp4" class="next-video played-video">
          <img src="https://webdevtrick.com/wp-content/uploads/horizontal-scroll-navigation.jpg" alt="">
          <h3 class="single-video-title">Horizontal Scroll Menu </h3>
          <p class="single-video-info">Built in HTML CSS </p>
            <span class="single-video-des">How we can create a scrolling navigation bar using HTML and CSS? Solution: Horizontal Scroll Navigation Using HTML CSS, Scrolling Menu Bar.</span></p>
        </a>
      </div>
    </div>
  </section>
</main>
  <script  src="function.js"></script>

</body>
</html>

100

101

102

103

<!DOCTYPE html>

<head>

<title>HTML Advance Video Player | Webdevtrick.com</title>

</head>

<body>

<h2 class="video-title">HTML 5 Video Player</h2>

<small class="video-author">Code By <a href="https://webdevtrick.com/">WebDevTrick</a></small>

</header>

</video>

</div>

</div>

<p>How we can create a scrolling navigation bar using HTML and CSS? Solution: Horizontal Scroll Navigation Using HTML CSS, Scrolling Menu Bar.</p>

</div>

<header class="next">Comming Next</header>

<p class="single-video-info">Built in Pure CSS</p>

<span class="single-video-des">How we can create an animated hover effect card using CSS clip-path? Solution: CSS Clip Path Animation Card, Clip-Path Hover Cards.

</span></p>

</a>

<h3 class="single-video-title">Bar Graphs</h3>

<p class="single-video-info">Built in JavaScript </p>

<span class="single-video-des">How we can create Bar Graphs With Animation using JavaScript, HTML, & CSS? Solution: JavaScript Animated Bar Graph. In Other Words, Bar Chart With Animation Effects.

</span></p>

</a>

<h3 class="single-video-title">Login Page</h3>

<span class="single-video-des">How we can create an animated login page design using HTML and CSS? Solution: Animated Login Page In HTML CSS, Example and Source Code.

</span></p>

</a>

<h3 class="single-video-title">Horizontal Scroll Menu </h3>

<p class="single-video-info">Built in HTML CSS </p>

<span class="single-video-des">How we can create a scrolling navigation bar using HTML and CSS? Solution: Horizontal Scroll Navigation Using HTML CSS, Scrolling Menu Bar.</span></p>

</a>

</div>

</section>

</main>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
@import url(https://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
body {
  background: #e8eaed;
  font: 16px/1.5 "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}
img {
  max-width: 100%;
}
h2 {
  font-weight: 400;
  font-size: 1.5rem;
}
a {
  color: inherit;
  text-decoration: none;
  box-shadow: inset 0px -1px 0px rgba(255, 255, 255, 0.5);
  transition: all 0.5s;
}
a:hover {
  box-shadow: inset 0px -24px 0px #61b5d9;
}
.wrapper {
  margin: 0 auto;
  padding: 0 1em;
  max-width: 69rem;
}
.truncate, .video-title, .single-video-title, .single-video-info {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
.video-area {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  color: #fff;
  padding: 4.5rem 0;
}
.video-column {
  float: left;
  max-width: 854px;
}
.video-player {
  background: #000;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 480px;
}
.video {
  display: block;
  cursor: pointer;
  width: 100%;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.playlist {
  float: right;
  font-size: 18px;
  font-weight: 600;
  max-width: 250px;
}
.video-header {
  background: #e60023;
  line-height: 1.5rem;
  padding: 1.5rem;
}
.video-title {
  float: left;
  margin: 0;
  width: auto;
  max-width: 75%;
}
.video-author {
  font-size: 18px;
  float: left;
  margin-left: 3rem;
}
.description {
  color: #212121;
}
.video-author a:hover {
  box-shadow: inset 0px -24px 0px #212121;
}
.video-controls {
  box-sizing: border-box;
  background: rgb(33,33,33, 0.8);
  line-height: 3rem;
  padding: 0 1.5rem;
  position: absolute;
  bottom: 0;
  -webkit-transform: translate3d(0, 3rem, 0);
          transform: translate3d(0, 3rem, 0);
  width: 100%;
  height: 3rem;
  vertical-align: middle;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.video-controls button {
  background: 0;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  width: 3rem;
  height: 3rem;
  vertical-align: middle;
}
.video-player:hover .video-controls {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.video-bars {
  background: rgb(33,33,33, 0.8);
  display: inline-block;
  margin: 0 1em;
  position: relative;
  width: 73%;
  height: 8px;
}
.bar-seeker,
.bar-progress,
.bar-buffer {
  position: absolute;
  height: 8px;
}
.bar-seeker {
  z-index: 1000;
}
.bar-progress {
  z-index: 100;
}
.bar-buffer {
  z-index: 10;
}
input[type=range] {
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
.bar-seeker::-ms-fill-lower {
  background: transparent;
}
.bar-seeker::-ms-fill-upper {
  background: transparent;
}
.bar-seeker::-webkit-slider-runnable-track {
  background: transparent;
  height: 8px;
  padding: 0;
}
.bar-seeker::-moz-range-track {
  background: transparent;
  height: 8px;
  padding: 0;
}
.bar-seeker::-ms-track {
  background: transparent;
  height: 8px;
  padding: 0;
}
.bar-seeker::-webkit-slider-thumb {
  background: #ff3c3c;
  border: 0;
  border-radius: 100%;
  width: 18px;
  height: 18px;
  margin-top: -4px;
}
.bar-seeker::-moz-range-thumb {
  background: #ff3c3c;
  border: 0;
  border-radius: 100%;
  width: 18px;
  height: 18px;
  margin-top: -4px;
}
.bar-seeker::-ms-thumb {
  background: #ff3c3c;
  border: 0;
  border-radius: 100%;
  width: 18px;
  height: 18px;
  margin-top: -4px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .bar-seeker {
    height: 24px;
    margin-top: -5px;
    padding: 0;
    vertical-align: middle;
  }
}
input.slider-volume {
  position: absolute;
  bottom: 36px;
  right: -40px;
  width: 6rem;
  opacity: 0;
  -webkit-transform: rotate(-90deg) scaleX(0);
          transform: rotate(-90deg) scaleX(0);
  -webkit-transform-origin: left;
          transform-origin: left;
  transition: all 1s;
}
.slider-volume::-webkit-slider-runnable-track {
  background: rgb(33,33,33, 0.8);
  height: 20px;
}
.slider-volume::-moz-range-track {
  background: rgb(33,33,33, 0.8);
  height: 20px;
}
.slider-volume::-ms-track {
  background: rgb(33,33,33, 0.8);
  height: 20px;
}
.slider-volume::-webkit-slider-thumb {
  background: #ff3c3c;
  border: 0;
  width: 8px;
  height: 24px;
  margin-top: -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;
  height: 24px;
  margin-top: -2px;
}
.btn-sound:hover + .slider-volume,
.slider-volume:hover {
  opacity: 1;
  -webkit-transform: rotate(-90deg) scaleX(1);
          transform: rotate(-90deg) scaleX(1);
}
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.2);
  border: none;
  height: 8px;
  width: 100%;
}
progress::-webkit-progress-bar {
  background: transparent;
}
progress::-webkit-progress-value {
  background: transparent;
}
.bar-buffer::-webkit-progress-value {
  background: rgba(255, 255, 255, 0.2);
}
.bar-buffer::-moz-progress-bar {
  background: rgba(255, 255, 255, 0.2);
}
.bar-progress::-webkit-progress-value {
  background: #ff3c3c;
}
.bar-progress::-moz-progress-bar {
  background: #ff3c3c;
}
.bar-progress {
  color: #ff3c3c;
}
.btn-replay {
  background: none;
  border: none;
  display: none;
  color: #ff3c3c;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -110px;
  margin-top: -110px;
  font-size: 9rem;
  width: 220px;
  height: 220px;
}
.time-bubble {
  background: #61b5d9;
  border-radius: 1.5rem 1.5rem 0px;
  height: 1.5rem;
  line-height: 1.5rem;
  position: absolute;
  bottom: 3.2rem;
  left: 4.8rem;
  padding: 0.5em;
  display: none;
}
.next {
  background: #212121;
  padding: 16.5px;
  max-height: 60px;
}
.next-video {
  display: block;
  height: 140px;
  position: relative;
  overflow: hidden;
}
.next-video img {
  display: block;
}
.next-video::before {
  background: linear-gradient(0deg, rgb(33,33,33, 0.8) 0%, transparent 60%);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 0.5s;
}
.single-video-title {
  position: absolute;
  -webkit-transform: translateY(-4.5rem);
          transform: translateY(-4.5rem);
  padding: 0.75rem 1.5rem;
  transition: all 0.5s;
}
.single-video-info {
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  padding: 0.75rem 1.5rem;
  position: absolute;
  -webkit-transform: translateY(-6.75rem);
          transform: translateY(-6.75rem);
  transition: all 0.5s;
  opacity: 0;
  width: 100%;
}
.next-video:hover .single-video-title {
  -webkit-transform: translateY(-9.75rem);
          transform: translateY(-9.75rem);
}
.next-video:hover::before {
  background: rgb(33,33,33, 0.7);
}
.next-video:hover .single-video-info {
  opacity: 1;
}
.played-video {
  -webkit-transform: scale(0);
          transform: scale(0);
  height: 0;
  width: 0;
}
.info-area {
  background: #fff;
  color: #212121;
}
.info-heading {
  color: #61b5d9;
  font-size: 3rem;
  font-weight: 300;
  text-align: center;
  margin: 4.5rem auto;
}
.clearfix:before, .wrapper:before, .video-header:before, .clearfix:after, .wrapper:after, .video-header:after {
  content: " ";
  display: table;
}
.clearfix:after, .wrapper:after, .video-header:after {
  clear: both;
}
@-webkit-keyframes bottomSlide {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bottomSlide {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

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

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

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

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

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

@import url(https://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {

font-family: 'FontAwesome', sans-serif;

}

body {

background: #e8eaed;

font: 16px/1.5 "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

}

img {

max-width: 100%;

}

h2 {

font-weight: 400;

font-size: 1.5rem;

}

a {

color: inherit;

text-decoration: none;

box-shadow: inset 0px -1px 0px rgba(255, 255, 255, 0.5);

transition: all 0.5s;

}

a:hover {

box-shadow: inset 0px -24px 0px #61b5d9;

}

.wrapper {

margin: 0 auto;

padding: 0 1em;

max-width: 69rem;

}

.truncate, .video-title, .single-video-title, .single-video-info {

box-sizing: border-box;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

width: 100%;

}

.video-area {

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

color: #fff;

padding: 4.5rem 0;

}

.video-column {

float: left;

max-width: 854px;

}

.video-player {

background: #000;

position: relative;

overflow: hidden;

width: 100%;

height: 480px;

}

.video {

display: block;

cursor: pointer;

width: 100%;

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

}

.playlist {

float: right;

font-size: 18px;

font-weight: 600;

max-width: 250px;

}

.video-header {

background: #e60023;

line-height: 1.5rem;

padding: 1.5rem;

}

.video-title {

float: left;

margin: 0;

width: auto;

max-width: 75%;

}

.video-author {

font-size: 18px;

float: left;

margin-left: 3rem;

}

.description {

color: #212121;

}

.video-author a:hover {

box-shadow: inset 0px -24px 0px #212121;

}

.video-controls {

box-sizing: border-box;

background: rgb(33,33,33, 0.8);

line-height: 3rem;

padding: 0 1.5rem;

position: absolute;

bottom: 0;

-webkit-transform: translate3d(0, 3rem, 0);

transform: translate3d(0, 3rem, 0);

width: 100%;

height: 3rem;

vertical-align: middle;

transition: -webkit-transform 0.5s;

transition: transform 0.5s;

transition: transform 0.5s, -webkit-transform 0.5s;

}

.video-controls button {

background: 0;

border: 0;

color: #fff;

font-size: 1.5rem;

width: 3rem;

height: 3rem;

vertical-align: middle;

}

.video-player:hover .video-controls {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

.video-bars {

background: rgb(33,33,33, 0.8);

display: inline-block;

margin: 0 1em;

position: relative;

width: 73%;

height: 8px;

}

.bar-seeker,

.bar-progress,

.bar-buffer {

position: absolute;

height: 8px;

}

.bar-seeker {

z-index: 1000;

}

.bar-progress {

z-index: 100;

}

.bar-buffer {

z-index: 10;

}

input[type=range] {

background: transparent;

cursor: pointer;

-webkit-appearance: none;

width: 100%;

}

input[type=range]::-webkit-slider-runnable-track {

-webkit-appearance: none;

}

input[type=range]::-webkit-slider-thumb {

-webkit-appearance: none;

}

input[type=range]:focus {

outline: none;

}

input[type=range]::-ms-track {

width: 100%;

cursor: pointer;

background: transparent;

border-color: transparent;

color: transparent;

}

.bar-seeker::-ms-fill-lower {

background: transparent;

}

.bar-seeker::-ms-fill-upper {

background: transparent;

}

.bar-seeker::-webkit-slider-runnable-track {

background: transparent;

height: 8px;

padding: 0;

}

.bar-seeker::-moz-range-track {

background: transparent;

height: 8px;

padding: 0;

}

.bar-seeker::-ms-track {

background: transparent;

height: 8px;

padding: 0;

}

.bar-seeker::-webkit-slider-thumb {

background: #ff3c3c;

border: 0;

border-radius: 100%;

width: 18px;

height: 18px;

margin-top: -4px;

}

.bar-seeker::-moz-range-thumb {

background: #ff3c3c;

border: 0;

border-radius: 100%;

width: 18px;

height: 18px;

margin-top: -4px;

}

.bar-seeker::-ms-thumb {

background: #ff3c3c;

border: 0;

border-radius: 100%;

width: 18px;

height: 18px;

margin-top: -4px;

}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

.bar-seeker {

height: 24px;

margin-top: -5px;

padding: 0;

vertical-align: middle;

}

input.slider-volume {

position: absolute;

bottom: 36px;

right: -40px;

width: 6rem;

opacity: 0;

-webkit-transform: rotate(-90deg) scaleX(0);

transform: rotate(-90deg) scaleX(0);

-webkit-transform-origin: left;

transform-origin: left;

transition: all 1s;

}

.slider-volume::-webkit-slider-runnable-track {

background: rgb(33,33,33, 0.8);

height: 20px;

}

.slider-volume::-moz-range-track {

background: rgb(33,33,33, 0.8);

height: 20px;

}

.slider-volume::-ms-track {

background: rgb(33,33,33, 0.8);

height: 20px;

}

.slider-volume::-webkit-slider-thumb {

background: #ff3c3c;

border: 0;

width: 8px;

height: 24px;

margin-top: -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;

height: 24px;

margin-top: -2px;

}

.btn-sound:hover + .slider-volume,

.slider-volume:hover {

opacity: 1;

-webkit-transform: rotate(-90deg) scaleX(1);

transform: rotate(-90deg) scaleX(1);

}

progress {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

background: transparent;

color: rgba(255, 255, 255, 0.2);

border: none;

height: 8px;

width: 100%;

}

progress::-webkit-progress-bar {

background: transparent;

}

progress::-webkit-progress-value {

background: transparent;

}

.bar-buffer::-webkit-progress-value {

background: rgba(255, 255, 255, 0.2);

}

.bar-buffer::-moz-progress-bar {

background: rgba(255, 255, 255, 0.2);

}

.bar-progress::-webkit-progress-value {

background: #ff3c3c;

}

.bar-progress::-moz-progress-bar {

background: #ff3c3c;

}

.bar-progress {

color: #ff3c3c;

}

.btn-replay {

background: none;

border: none;

display: none;

color: #ff3c3c;

position: absolute;

top: 50%;

left: 50%;

margin-left: -110px;

margin-top: -110px;

font-size: 9rem;

width: 220px;

height: 220px;

}

.time-bubble {

background: #61b5d9;

border-radius: 1.5rem 1.5rem 0px;

height: 1.5rem;

line-height: 1.5rem;

position: absolute;

bottom: 3.2rem;

left: 4.8rem;

padding: 0.5em;

display: none;

}

.next {

background: #212121;

padding: 16.5px;

max-height: 60px;

}

.next-video {

display: block;

height: 140px;

position: relative;

overflow: hidden;

}

.next-video img {

display: block;

}

.next-video::before {

background: linear-gradient(0deg, rgb(33,33,33, 0.8) 0%, transparent 60%);

content: "";

width: 100%;

height: 100%;

position: absolute;

transition: all 0.5s;

}

.single-video-title {

position: absolute;

-webkit-transform: translateY(-4.5rem);

transform: translateY(-4.5rem);

padding: 0.75rem 1.5rem;

transition: all 0.5s;

}

.single-video-info {

box-sizing: border-box;

font-size: 14px;

font-weight: 400;

padding: 0.75rem 1.5rem;

position: absolute;

-webkit-transform: translateY(-6.75rem);

transform: translateY(-6.75rem);

transition: all 0.5s;

opacity: 0;

width: 100%;

}

.next-video:hover .single-video-title {

-webkit-transform: translateY(-9.75rem);

transform: translateY(-9.75rem);

}

.next-video:hover::before {

background: rgb(33,33,33, 0.7);

}

.next-video:hover .single-video-info {

opacity: 1;

}

.played-video {

-webkit-transform: scale(0);

transform: scale(0);

height: 0;

width: 0;

}

.info-area {

background: #fff;

color: #212121;

}

.info-heading {

color: #61b5d9;

font-size: 3rem;

font-weight: 300;

text-align: center;

margin: 4.5rem auto;

}

.clearfix:before, .wrapper:before, .video-header:before, .clearfix:after, .wrapper:after, .video-header:after {

content: " ";

display: table;

}

.clearfix:after, .wrapper:after, .video-header:after {

clear: both;

}

@-webkit-keyframes bottomSlide {

0% {

-webkit-transform: translate3d(0, 100%, 0);

transform: translate3d(0, 100%, 0);

opacity: 1;

}

100% {

opacity: 1;

}

@keyframes bottomSlide {

0% {

-webkit-transform: translate3d(0, 100%, 0);

transform: translate3d(0, 100%, 0);

opacity: 1;

}

100% {

opacity: 1;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
var videoPlayer = function(){
    "use strict";

    function el(id) {
        return document.getElementById(id);
    }

    var vid = el("video"),

        btnState = el("btnState"),
        btnReplay = el("btnReplay"),
        btnSound = el("btnSound"),
        sliderVolume = el("sliderVolume"),

        barSeeker = el("barSeeker"),
        barBuffer = el("barBuffer"),
        barProgress = el("barProgress"),

        timePlayed = el("timePlayed"),
        timeDuration = el("timeDuration"),
        timeBubble = el("timeBubble"),

        thePosition,
        theMinutes,
        theSeconds,
        theTime;

    var readableTime = function(t) {
        theMinutes = "0" + Math.floor(t / 60); // Divide seconds to get minutes, add leading zero
        theSeconds = "0" + parseInt(t % 60); // Get remainder seconds
        theTime = theMinutes.slice(-2) + ":" + theSeconds.slice(-2); // Slice to two spots to remove excess zeros
        return theTime;
    };

    /* Video controls */

    var togglePlay = function(){
        if(vid.paused) {
            vid.play();
            btnState.firstElementChild.className = "fontawesome-pause";
            btnReplay.style.display = "none";
            vid.style.opacity = 1;
        } else {
            vid.pause();
            btnState.firstElementChild.className = "fontawesome-play";
        }
    };

    var toggleSound = function(){
        if(vid.muted) {
            vid.muted = false;
            sliderVolume.value = 10;
            btnSound.firstElementChild.className = "fontawesome-volume-up";
        } else {
            vid.muted = true;
            sliderVolume.value = 0;
            btnSound.firstElementChild.className = "fontawesome-volume-off";
        }
    };

    /* Update seeker value and time played */
    var updateTimeDisplay = function() {
        var timePercent = (100 / vid.duration) * vid.currentTime;
        barSeeker.value = timePercent;
        barProgress.value = timePercent;
        timePlayed.innerHTML = readableTime(vid.currentTime);
    };

    var replayVideo = function() {
        vid.currentTime = 0;
        btnState.firstElementChild.className = "fontawesome-pause";
        btnReplay.style.display = "none";
        vid.play();
    };

    // Toggle buttons
    vid.addEventListener("click",togglePlay);
    btnState.addEventListener("click",togglePlay);
    btnSound.addEventListener("click",toggleSound);

    // Volume slider
    sliderVolume.addEventListener("change", function() {
        var theVolume = sliderVolume.value / 10;
        vid.volume = theVolume;

        if(theVolume === 0) {
            btnSound.firstElementChild.className = "fontawesome-volume-off";
        } else if (theVolume === 1) {
            btnSound.firstElementChild.className = "fontawesome-volume-up";
        } else {
            btnSound.firstElementChild.className = "fontawesome-volume-down";
        }
    });

    // Move seeker bar
    vid.addEventListener("timeupdate",updateTimeDisplay);

    // Allow click on seeker to change video position
    barSeeker.addEventListener("change", function() {
        thePosition = vid.duration * (barSeeker.value / 100);
        vid.currentTime = thePosition;
    });

    // Pause video and seeker update while seeker is being interacted with
    barSeeker.addEventListener("mousedown",function(){
        vid.pause();
        vid.removeEventListener("timeupdate",updateTimeDisplay);
    });

    barSeeker.addEventListener("mouseup",function(){
        vid.play();
        btnState.firstElementChild.className = "fontawesome-pause";
        vid.addEventListener("timeupdate",updateTimeDisplay);
    });

    // Buffer bar
    vid.addEventListener("timeupdate", function() {
        var bufferPercent = (100 / vid.duration) * vid.buffered.end(vid.buffered.length - 1);
        barBuffer.value = bufferPercent;
    });

    // Video length
    vid.addEventListener('loadeddata', function(){
        timeDuration.innerHTML = readableTime(vid.duration);
    });

    // Time bubble on seeker
    var bubblePop = function(e){
        var cursorPos = (e.clientX - (barSeeker.getBoundingClientRect().left)) / (barSeeker.offsetWidth);
        var seekTime = cursorPos * vid.duration;

        if(seekTime) {
            timeBubble.innerHTML = readableTime(seekTime);
            timeBubble.style.left = (e.clientX - barSeeker.getBoundingClientRect().left + 78) + "px";
            timeBubble.style.display = "block";
        }
    };

    barSeeker.addEventListener("mousemove", bubblePop);

    barSeeker.addEventListener("mouseout", function(){
        timeBubble.style.display = "none";
    });

// Video playlist
var playlistAnchor = document.querySelectorAll(".next-video"),
    imageURL = document.querySelectorAll(".next-video img");

var prevTitle = document.querySelector(".video-title"),
    prevDescription = document.querySelector(".description");

    for (var i = 0; i < 4; i++) {
        (function(){
            var k = i;

            playlistAnchor[i].addEventListener("click", function(e){
                e.preventDefault();

                var playedVideo = document.querySelector(".played-video");
                playedVideo.classList.remove("slide");
                playedVideo.classList.remove("played-video");

                // Update video
                vid.poster = imageURL[k].src;
                vid.src = playlistAnchor[k].href;

                // Update info
                prevTitle.innerHTML = this.querySelector(".single-video-title").textContent;
                prevDescription.innerHTML = this.querySelector(".single-video-des").textContent;

                // Reset and play video
                replayVideo();

                this.classList.add("played-video");
                playedVideo.classList.add("slide");

                setTimeout(function(){
                    playlistAnchor[k].parentNode.appendChild(playlistAnchor[k]);
                }, 500);
            });

        }());
    }

}();

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

/* Code By Webdevtrick ( https://webdevtrick.com ) */

var videoPlayer = function(){

"use strict";

function el(id) {

return document.getElementById(id);

}

var vid = el("video"),

btnState = el("btnState"),

btnReplay = el("btnReplay"),

btnSound = el("btnSound"),

sliderVolume = el("sliderVolume"),

barSeeker = el("barSeeker"),

barBuffer = el("barBuffer"),

barProgress = el("barProgress"),

timePlayed = el("timePlayed"),

timeDuration = el("timeDuration"),

timeBubble = el("timeBubble"),

thePosition,

theMinutes,

theSeconds,

theTime;

var readableTime = function(t) {

theMinutes = "0" + Math.floor(t / 60); // Divide seconds to get minutes, add leading zero

theSeconds = "0" + parseInt(t % 60); // Get remainder seconds

theTime = theMinutes.slice(-2) + ":" + theSeconds.slice(-2); // Slice to two spots to remove excess zeros

return theTime;

};

/* Video controls */

var togglePlay = function(){

if(vid.paused) {

vid.play();

btnState.firstElementChild.className = "fontawesome-pause";

btnReplay.style.display = "none";

vid.style.opacity = 1;

} else {

vid.pause();

btnState.firstElementChild.className = "fontawesome-play";

}

};

var toggleSound = function(){

if(vid.muted) {

vid.muted = false;

sliderVolume.value = 10;

btnSound.firstElementChild.className = "fontawesome-volume-up";

} else {

vid.muted = true;

sliderVolume.value = 0;

btnSound.firstElementChild.className = "fontawesome-volume-off";

}

};

/* Update seeker value and time played */

var updateTimeDisplay = function() {

var timePercent = (100 / vid.duration) * vid.currentTime;

barSeeker.value = timePercent;

barProgress.value = timePercent;

timePlayed.innerHTML = readableTime(vid.currentTime);

};

var replayVideo = function() {

vid.currentTime = 0;

btnState.firstElementChild.className = "fontawesome-pause";

btnReplay.style.display = "none";

vid.play();

};

// Toggle buttons

vid.addEventListener("click",togglePlay);

btnState.addEventListener("click",togglePlay);

btnSound.addEventListener("click",toggleSound);

// Volume slider

sliderVolume.addEventListener("change", function() {

var theVolume = sliderVolume.value / 10;

vid.volume = theVolume;

if(theVolume === 0) {

btnSound.firstElementChild.className = "fontawesome-volume-off";

} else if (theVolume === 1) {

btnSound.firstElementChild.className = "fontawesome-volume-up";

} else {

btnSound.firstElementChild.className = "fontawesome-volume-down";

}

});

// Move seeker bar

vid.addEventListener("timeupdate",updateTimeDisplay);

// Allow click on seeker to change video position

barSeeker.addEventListener("change", function() {

thePosition = vid.duration * (barSeeker.value / 100);

vid.currentTime = thePosition;

});

// Pause video and seeker update while seeker is being interacted with

barSeeker.addEventListener("mousedown",function(){

vid.pause();

vid.removeEventListener("timeupdate",updateTimeDisplay);

});

barSeeker.addEventListener("mouseup",function(){

vid.play();

btnState.firstElementChild.className = "fontawesome-pause";

vid.addEventListener("timeupdate",updateTimeDisplay);

});

// Buffer bar

vid.addEventListener("timeupdate", function() {

var bufferPercent = (100 / vid.duration) * vid.buffered.end(vid.buffered.length - 1);

barBuffer.value = bufferPercent;

});

// Video length

vid.addEventListener('loadeddata', function(){

timeDuration.innerHTML = readableTime(vid.duration);

});

// Time bubble on seeker

var bubblePop = function(e){

var cursorPos = (e.clientX - (barSeeker.getBoundingClientRect().left)) / (barSeeker.offsetWidth);

var seekTime = cursorPos * vid.duration;

if(seekTime) {

timeBubble.innerHTML = readableTime(seekTime);

timeBubble.style.left = (e.clientX - barSeeker.getBoundingClientRect().left + 78) + "px";

timeBubble.style.display = "block";

}

};

barSeeker.addEventListener("mousemove", bubblePop);

barSeeker.addEventListener("mouseout", function(){

timeBubble.style.display = "none";

});

// Video playlist

var playlistAnchor = document.querySelectorAll(".next-video"),

imageURL = document.querySelectorAll(".next-video img");

var prevTitle = document.querySelector(".video-title"),

prevDescription = document.querySelector(".description");

for (var i = 0; i < 4; i++) {

(function(){

var k = i;

playlistAnchor[i].addEventListener("click", function(e){

e.preventDefault();

var playedVideo = document.querySelector(".played-video");

playedVideo.classList.remove("slide");

playedVideo.classList.remove("played-video");

// Update video

vid.poster = imageURL[k].src;

vid.src = playlistAnchor[k].href;

// Update info

prevTitle.innerHTML = this.querySelector(".single-video-title").textContent;

prevDescription.innerHTML = this.querySelector(".single-video-des").textContent;

// Reset and play video

replayVideo();

this.classList.add("played-video");

playedVideo.classList.add("slide");

setTimeout(function(){

playlistAnchor[k].parentNode.appendChild(playlistAnchor[k]);

}, 500);

});

}());

}

}();

That’s It. I have put a max-height of the elements of the code section, you have to scroll to see all the codes & also you can copy the codes using the buttons are given in top-right side of the element. Now you have successfully created HTML Video Player With JavaScript and CSS, Advanced Playlist Feature built-in. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visting.

10 COMMENTS

elfa January 30, 2020 At 2:25 am

How to add a vertical scrollbar to the playlist panel so you can choose other videos to play

Reply
- Mzoon March 23, 2020 At 9:35 pm
  
  +1 I need this too
  
  Reply
- cyberlp23 April 7, 2020 At 1:16 pm
  
  same here!
  
  Reply
- Aguy1 November 25, 2020 At 2:23 pm
  
  Vertical scroll on this would make it perfect
  
  Reply
Mackmiller19 February 18, 2020 At 3:53 pm

Hi! I’d love to incorporate this into a project for educational use. Do I need to obtain a license?

Thanks!

Reply
- shaan February 19, 2020 At 2:11 am
  
  no, you can use it.
  
  Reply
caleb September 9, 2020 At 2:39 am

weldone shaan,thanks for this wonderful project..
my question is this,how will i add choose media button that will choose the video from your folder on your computer

Reply
caleb September 9, 2020 At 2:41 am

weldone shaan,thanks for this wonderful project..
can you please send your mail to me please??

Reply
Himashu December 29, 2020 At 11:12 am

how to add more than 5 videos in this player ?
As i ad 6th video in html code it plays 6th video in next page how do i fix it.?

Reply
SAURISH May 29, 2021 At 7:49 am

what if i want to enable full screen can you help me man please?

Reply