Video Player Interface for Bootstrap 5

#bootstrap #videoplayer #frontend #html

Since I'm currently working on a project that requires a custom video player for Bootstrap, I decided to share the code with everyone.

Yeah, it's Open Source:
https://koehlersimon.github.io/bootstrap-videoplayer/

If you want to participate on GitHub, let's go:
https://github.com/koehlersimon/bootstrap-videoplayer

It's an experimental interface to implement a video player using the Bootstrap 5 framework. The HTML structure was deliberately created so that you can customize the player to your own design using Bootstrap's built-in CSS classes.

Bootstrap Version 5.0.2
Uses Bootstrap Icons

UPDATE 2021-08-09

The video player now has the main functions needed to play videos, such as play/pause, jump to a specific point in the timeline, adjust volume and enable/disable full screen.

Example HTML Markup for Video Player

<div class="videoplayer" id="myCustomPlayer">
   <div class="ratio ratio-16x9 bg-dark">
      <video class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"></video>
   <div>
   <div class="controls">
      <button class="btn btn-lg btn-video-playpause" type="button" title="Play Video">
          <i class="bi bi-play-fill"></i>
          <i class="bi bi-pause-fill d-none"></i>
      </button>
      <div class="px-1 w-100">
          <div class="progress w-100">
              <div class="progress-bar"></div>
          </div>
      </div>
      <button class="btn btn-lg btn-video-pip" title="Play picture in picture">
          <i class="bi bi-pip"></i>
      </button>
      <button class="btn btn-lg btn-video-fullscreen">
          <i class="bi bi-arrows-fullscreen"></i>
      </button>
      <div class="dropup">
          <button class="btn btn-lg btn-video-volume" data-bs-toggle="dropdown" title="Volume">
              <i class="bi bi-volume-mute-fill"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end dropup-volume">
              <input type="range" class="form-range form-range-volume">
          </div>
      </div>
      <div class="dropup">
          <button class="btn btn-lg" data-bs-toggle="dropdown" title="More...">
              <i class="bi bi-three-dots-vertical"></i>
          </button>
          <div class="dropdown-menu dropdown-menu-end">
              <a class="dropdown-item" href="#">
                  <i class="bi bi-info-circle-fill"></i> About
              </a>
          </div>
      </div>
   </div>
</div>