Custom Fullscreen HTML5 Video Player In JavaScript

Preview:

Description:

A fullscreen HTML5 video player with custom controls like play, pause, forward, backward, fullscreen toggle, and etc.

How to use it:

1. Embed an HTML5 video player together with video controls and descriptions into the page.

<div class="player">
  <div class="player-overlay" data-fullscreen="false">
    <div class="container">
      <div class="information-container">
        <h1 class="title">Video Title</h1>
        <p class="description">
          Video Description
        </p>
      </div>
      <div class="player-container">
        <div class="video-progress">
          <div class="video-progress-filled"></div>
        </div>
        <div class="player-controls">
          <div class="player-buttons">
            <button
              aria-label="play"
              class="button play"
              title="play"
              type="button"
            ></button>
            <button
              aria-label="pause"
              class="button pause"
              hidden
              title="pause"
              type="button"
            ></button>
            <button
              aria-label="backward"
              class="button backward"
              title="backward"
              type="button"
            ></button>
            <button
              aria-label="forward"
              class="button forward"
              title="forward"
              type="button"
            ></button>
            <button
              aria-label="volume"
              class="button volume"
              title="volume"
              type="button"
            ></button>
            <button
              aria-label="silence"
              class="button silence"
              hidden
              title="silence"
              type="button"
            ></button>
            <div class="volume-progress">
              <div class="volume-progress-filled"></div>
            </div>
            <div class="time-container">
              <p class="current-time">0:00</p>
              <p class="time-separator">/</p>
              <p class="duration-video">0:00</p>
            </div>
          </div>
          <div class="expand-container">
            <button
              aria-label="expand"
              class="button expand"
              title="expand"
              type="button"
            ></button>
            <button
              aria-label="reduce"
              class="button reduce"
              hidden
              title="reduce"
              type="button"
            ></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <video
    class="video"
    poster="/path/to/poster.png"
    src="/path/to/video.mp4"
  ></video>
</div>

2. Load the necessary stylesheet and JavaScript on the page. That’s it.

<link rel="stylesheet" href="./styles/style.css" />
<script src="./js/index.js"></script>