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>
Note
This article will be updated, as well as the GitHub Page and Repository. Check back soon and please leave a comment! Thanks!
Support my work:
► https://www.paypal.com/paypalme/typo3freelancer
► https://www.patreon.com/koehlersimon
Follow me:
► https://github.com/koehlersimon
► https://www.linkedin.com/in/typo3-freelancer/
► https://bitbucket.org/typo3freelancer/
► https://twitter.com/koehlersimon
► https://www.instagram.com/fullstackfreelancer/
Top comments (1)
Bro, all your github links are dead. This is the top result on google for "bootstrap 5 video player with controls" so better fix that shit xD