→ 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

6.5k

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 Kanban Task Board

Author:
Anonymous

1 year ago

7k

v.5.3
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

1 year ago

9k

v.5.3
Timer with bootstrap

Author:
Anonymous

1 year ago

3.3k

v.5.3
bootstrap quiz template (Interactive)
Interactive MCQ Quiz show results at the end

Author:
Arturo

1 year ago

3.7k

v.5.3
Calender

Author:
Anonymous

1 year ago

1.4k

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

Author:
Prajwal Hallale

1 year ago

9.3k

v.5.3
Countdown timer
Countdown timer with js

Author:
Moana silva

1 year ago

12.3k

v.5.3
Music player with bootstrap 5
Animated music player design

Author:
Mateo Rojas

1 year ago

2.6k

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

1 year ago

11.9k

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

1 year ago

1.7k

v.5.3
Audio player with bootstrap

Author:
Arturo

1 year ago

4k

v.5.3
Typewriter Effect

Author:
Anonymous

1 year ago

2.2k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent