Control Carousel video play time

I Need Help
1

Looking to make a carousel were I can add control the following:

Slide1 AutoPlay a 30 second video and then move to the next.
Slide2 AutoPlay a 20 second video and then move to the next.
Slide3 AutoPlay a 50 second video and then move to the next.

I saw this, but not sure it will help.


<script>
  // Customize carousel slide intervals
  $('#videoCarousel').on('slide.bs.carousel', function (e) {
    var carousel = $(this);
    var interval;
    switch (e.to) {
      case 0:
        interval = 5000; // 5 seconds for slide 0
        break;
      case 1:
        interval = 8000; // 8 seconds for slide 1
        break;
      case 2:
        interval = 3000; // 3 seconds for slide 2
        break;
      default:
        interval = 5000; // Default interval
    }
    carousel.carousel('pause');
    setTimeout(function() {
      carousel.carousel('next');
    }, interval);
  });
</script>
2

You have more things to think about than just advancing the slide, like video buffering times, so you would advance the slide when the video ends, not a fixed duration.

Do you need audio? The browser restrictions on autoplay and how this will work on mobile.
Auto playing video without opt in is bad for the mobile user experience.

Also would you want people to be able to advance without waiting.

You are heading into pay a web developer territory really, so I will only give you some things to consider. I wont be providing any solutions.

But I will give you a hint, you can make use of the BS carousel events

Then with all this you need to question if a carousel is actually the right approach, when you can just embed this and manage it with Javascript.

3

Man, Pete as busy as you are I am thankful for your willingness to help.
i don’t know anything about buffering video. I did see some info on Preload the video.
You’re are correct about advancing the video to the next when the video ends.
I would like the audio to play, but I am aware it does not always work.
People advancing could be done through the arrows
If I knew JS… yes

5

Thanks Jerry,
So the Script above will not help?

If not, what do I look for specially?

7

Okay, what would you use?

8

He mentioned it already.

9

Why not just create this as one video…and after 30 seconds have the video transitioning into the next one etc. will look slick!

10

This tutorial helped. :slight_smile:

11

Because all the video are not the same length. Some are 10 seconds, Some are 20…

12

Yeah but you can do this in the video edit which will be so much slicker and smoother?
You can cut it to fade in whatever time you want and have much better transitions and much easier to add and change in the future.

To me personally its like your trying to use a Carousel to be a video editing suite with code etc where a video to me makes so much more sense and visually will be much better.

If your using Blocs then you have a Mac and will have iMovie on - thats perfect for so many applications and even thought its classed as a basic editing suite you will not believe the power this tool has, I’ve seen mind-blowing videos edited on it from my videos guys on events.

Good luck which ever way you do.

ps, forgot to mention - if you have Audio on these videos too, then doing a video will be more powerful in terms of keeping levels the same, fading out audio at the end of each transition rather than a SNAP to go to next slide, and even overlay some nice music on the slide transition if need be and add titles.

13

Okay I get what you are saying. While your suggestion some good thoughts, it will not work because the amount of mp4 would make the file too large. I appreciate you taking the time to reply.

1 Like
14

No problem, always worth looking at options. I would still go the video route and drop it for web use in Handbrake.

A slideshow with video, not sure if this will be very seamless…but I might be wrong!

If you are looking at adding it as a background video then you can always do this in Youtube too if its background as you mentioned the file size?

Goodluck

15

I hope to get time today to add this in the Blocs Code Widget and see if this is what I am looking for.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Video Carousel</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0-beta1/css/bootstrap.min.css">
</head>

<body>

    <div id="myVideoCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-bs-target="#myVideoCarousel" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#myVideoCarousel" data-bs-slide-to="1"></li>
            <li data-bs-target="#myVideoCarousel" data-bs-slide-to="2"></li>
        </ol>

        <!-- Slides -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <video src="video1.mp4" class="w-100" autoplay controls></video>
            </div>
            <div class="carousel-item">
                <video src="video2.mp4" class="w-100" autoplay controls></video>
            </div>
            <div class="carousel-item">
                <video src="video3.mp4" class="w-100" autoplay controls></video>
            </div>
        </div>

        <!-- Controls -->
        <a class="carousel-control-prev" href="#myVideoCarousel" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </a>
        <a class="carousel-control-next" href="#myVideoCarousel" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </a>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/5.0.0-beta1/js/bootstrap.min.js"></script>
    <script>
        // Play next video when the current video ends
        $(document).ready(function () {
            $('#myVideoCarousel').on('slid.bs.carousel', function () {
                var video = $(this).find('.carousel-item.active video');
                video.on('ended', function () {
                    $(this).closest('.carousel-item').removeClass('active');
                    $(this).closest('.carousel-item').next().addClass('active');
                    $('#myVideoCarousel').carousel('next');
                });
            });
        });
    </script>

    <style>
        /* Add custom styles for bold controls, fade-in, fade-out, ease-in, ease-out */
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            font-weight: bold;
        }

        .carousel-item {
            opacity: 0;
            transition: opacity 1s ease-in;
        }

        .carousel-item.active {
            opacity: 1;
            transition: opacity 1s ease-out;
        }
    </style>

</body>

</html>
16

Might want to strip some of that code out before you do that @KBConcepts

17

Thanks Pete, I’ve got a few I am going to try. :slight_smile:
It would be cool, if a Blocs had this feature of adding a Video Carousel with the at some of the of the thing I’ve mentioned.

18

There is a reason people pay developers. But what you want to do is fully achievable in Blocs. Can’t be a tick box for everything.

19

Agreed, but how better would it be if Blocs brought much of the useful features for any level to enhance their platform.