Bootstrap - 等待视频完成，然后再滑动到下一个轮播

Question

我希望轮播等待视频播放完毕，然后再转到下一张幻灯片。这是我的代码，我根据数据库中媒体文件的数量循环它。

        <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 代码

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

这适用于第一个视频，然后当第二个视频停止时，它不会转到下一张幻灯片。任何人都可以帮忙吗？谢谢。

Answer 1

document.getElementById 只会返回它找到的第一个元素。

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

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