→ Anonymous
→ Bootstrap with VideoJS player

Bootstrap with VideoJS player

Forked from> @anonymous/bootstrap-with-videojs-player

Video player with buttons

This bootstrap css example is contributed by Anonymous, on 19-Nov-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Widget

Author Anonymous

499

v.5.3

Fork Fullscreen

</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
<link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
</head>

<body>

<div class="container mt-5">
    <div class="row">
        <div class="col-lg-12">
            <div class="video-container mb-4">
                <video
    id="videoPlayer" 
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="https://via.placeholder.com/800x450.png?text=Video+Poster"
    data-setup="{}"
  >
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
      <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

</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>
</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>
<body>

More Examples

Timer with bootstrap

Author:
Anonymous

1 month ago

415

v.5.3
Bootstrap with VideoJS player
Video player with buttons

Author:
Anonymous

3 months ago

389

v.5.3
Marquee Animation
On hover stop effect

Author:
Anonymous

7 months ago

3.6k

v.5.3
Audio player with bootstrap

Author:
Arturo

2 months ago

698

v.5.3
Interactive Kanban Task Board

Author:
Anonymous

5 months ago

3k

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

Author:
Mateo Rojas

2 months ago

476

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

Author:
Prajwal Hallale

7 months ago

2.6k

v.5.3
Typewriter Effect

Author:
Anonymous

7 months ago

620

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

Author:
Arturo

2 months ago

545

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

7 months ago

1.6k

v.5.3
Calender

Author:
Anonymous

7 months ago

414

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

5 months ago

1.8k

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent