Bootstrap — Wait for the video to finish before sliding to the next carousel

问题

I want my carousel to wait for the video to finish before going to the next slide. This is my code, I'm looping it according to the number of media files in my database.

        <div id="mediaCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
            <!-- container dimensions should be max = w1338xh691 -->

            <!-- if there's no media -->
            <?php if(!$media): ?>
                <!-- callback here, in case there's no media in the database. -->
                <div class="item">
                    <img src="<?php echo base_url()?>assets/water.jpg"/>
                </div>

            <!-- else -->
            <?php else: ?>
                <!-- call carousel -->
                <!-- foreach media as _media -->
                <?php foreach($media as $_media): ?>

                    <!-- validate if media type is video -->
                    <?php if($_media->media_type == 0): ?>
                        <!-- call video elements -->
                        <div class="item <?php echo $_media->id == 1 ? 'active' : '' ?>">
                            <video class="d-block w-100" src="<?php echo $_media->file_url; ?>"  muted autoplay="autoplay" preload="auto" id="video"/>
                        </div>

                    <!-- validate if media type is image -->
                    <?php elseif($_media->media_type == 1): ?>
                        <!-- call image elements -->
                        <div class="item">
                            <img class="d-block w-100" src="<?php echo $_media->file_url; ?>"/>
                        </div>
                    <!-- else, media is considered "other media" -->
                    <?php else: ?>
                        <!-- just call a div -->
                        <div class="item">

                        </div>

                    <!-- endif -->
                    <?php endif; ?>
                <!-- endforeach -->
                <?php endforeach; ?>
            <!-- endif -->
            <?php endif; ?>
            </div>
        </div>

And here's my javascript/jquery code

<script type="text/javascript">
    $("#mediaCarousel").carousel({ interval: false}); // this prevents the auto-loop

    document.getElementById('video').addEventListener('ended', myHandler, false);

    function myHandler(e) {
        $("#mediaCarousel").carousel('next');
    }
</script>

This works on the first video, then when the second video stops it won't go to the next slide. Can anyone help? Thanks.

回答1:

document.getElementById will only return the first element it found.

try to find your handler with all the video element using the following code.

<script type="text/javascript">
    $("#mediaCarousel").carousel({ interval: false}); // this prevents the auto-loop
    var videos = document.querySelectorAll("video.d-block");
    videos.forEach(function(e) {
        e.addEventListener('ended', myHandler, false);
    }); 

    function myHandler(e) {
        $("#mediaCarousel").carousel('next');
    }
</script>

来源：https://stackoverflow.com/questions/50264104/bootstrap-wait-for-the-video-to-finish-before-sliding-to-the-next-carousel

标签

javascript

jquery

html

twitter-bootstrap

carousel