→ Kemaya m
→ Bootstrap video player

Bootstrap video player

Video player with buttons

This bootstrap css example is contributed by Kemaya m, on 20-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Widget

Author Kemaya m

487

v.5.3

Fork Fullscreen

<div class="container mt-5">
    <div class="row">
        <div class="col-lg-8">
            <div class="video-container mb-4">
                <video id="videoPlayer" poster="https://via.placeholder.com/800x450.png?text=Video+Poster">
                    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
                <div class="custom-controls">
                    <button class="btn btn-light btn-sm" id="playPauseBtn"><i class="bi bi-play-fill"></i></button>
                    <input type="range" class="form-range" id="progressBar" min="0" max="100" step="1" value="0">
                    <button class="btn btn-light btn-sm" id="muteBtn"><i class="bi bi-volume-up-fill"></i></button>
                    <button class="btn btn-light btn-sm" id="fullscreenBtn"><i class="bi bi-fullscreen"></i></button>
                </div>
            </div>
            <h2 class="mb-3">Video Title</h2>
            <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam euismod, nisi vel
                consectetur interdum, nisl nunc egestas nunc, vitae tincidunt nisl nunc euismod nunc.</p>
        </div>
        <div class="col-lg-4">
            <h3 class="mb-3">Playlist</h3>
            <ul class="list-group">
                <li class="list-group-item playlist-item active">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Video 1</h5>
                        <small>3:45</small>
                    </div>
                    <p class="mb-1">Short description of video 1.</p>
                </li>
                <li class="list-group-item playlist-item">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Video 2</h5>
                        <small>2:30</small>
                    </div>
                    <p class="mb-1">Short description of video 2.</p>
                </li>
                <li class="list-group-item playlist-item">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Video 3</h5>
                        <small>4:10</small>
                    </div>
                    <p class="mb-1">Short description of video 3.</p>
                </li>
            </ul>
        </div>
    </div>
</div>

playPauseBtn.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                playPauseBtn.innerHTML = '<i class="bi bi-pause-fill"></i>';
            } else {
                video.pause();
                playPauseBtn.innerHTML = '<i class="bi bi-play-fill"></i>';
            }
        });

video.addEventListener('timeupdate', () => {
            const progress = (video.currentTime / video.duration) * 100;
            progressBar.value = progress;
        });

progressBar.addEventListener('input', () => {
            const time = (progressBar.value / 100) * video.duration;
            video.currentTime = time;
        });

muteBtn.addEventListener('click', () => {
            video.muted = !video.muted;
            muteBtn.innerHTML = video.muted ? '<i class="bi bi-volume-mute-fill"></i>' : '<i class="bi bi-volume-up-fill"></i>';
        });

fullscreenBtn.addEventListener('click', () => {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            } else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen();
            } else if (video.webkitRequestFullscreen) {
                video.webkitRequestFullscreen();
            } else if (video.msRequestFullscreen) {
                video.msRequestFullscreen();
            }
        });
</script>

More Examples

Interactive Quiz Application
1. Dynamic Question Loading: Questions are loaded one at a time from a predefined set. 2. Timer: Each question has a 30-second time limit. Interactive Options: Users can select their answer, with visual feedback for correct and incorrect choices. 3. Progress Bar: Shows the user's progress through the quiz. 4. Results Summary: Displays the final score with a congratulatory or encouraging message. 5. Responsive Design: The quiz adapts to different screen sizes.

Author:
Ross Wille

2 months ago

217

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

3 months ago

686

v.5.3
Typewriter Effect

Author:
Anonymous

3 months ago

258

v.4.6
Music Player
Working music player With start top buttons and progress bar

Author:
Prajwal Hallale

3 months ago

582

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

2 months ago

1.2k

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

3 months ago

1.2k

v.5.3
Calender

Author:
Anonymous

3 months ago

219

v.4.6
Modern Dashboard Analytics Card
A sleek, modern dashboard component featuring animated metric cards with progress indicators and trend badges. Perfect for displaying key business metrics like revenue, users, and orders with visual progress tracking.

Author:
Alaric Sloane

1 week ago

41

v.5.3
Contact us section with Image

Author:
Anonymous

3 months ago

1.9k

v.4.6
Get In Touch Form Example
Contact us form

Author:
Anonymous

3 weeks ago

64

v.5.3
Credit cards bootstrap 5
credit cards design made with Bootstrap 5

Author:
Ankit khedkar

3 months ago

317

v.5.3
Bootstrap Footer example
dark footer

Author:
Anonymous

7 months ago

326

v.3.4

Didn't find component you were looking for?

Search from 200+ componenent