引导程序-等待视频结束，然后滑动到下一个轮播 [英] 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>

这是我的javascript/jquery代码

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.

推荐答案

document.getElementById将仅返回找到的第一个元素.

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

尝试使用以下代码找到包含所有video元素的处理程序.

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>

这篇关于引导程序-等待视频结束，然后滑动到下一个轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！