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

Posted 2023-05-08

【中文标题】Bootstrap - 等待视频完成，然后再滑动到下一个轮播

【英文标题】：Bootstrap -- Wait for the video to finish before sliding to the next carousel

【发布时间】：2018-10-20 04:55:38

【问题描述】：

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

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

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

【问题讨论】：

这里停止是因为javascript只获取第一个ID，你可以尝试定义一个动态ID，例如#mediaCarousel-vid1 #mediaCarousel-2在javascript中创建动态IDS来恢复，我有这个一旦我解决了这个问题

给你的

如果不清楚，id 用于标识元素，例如，您永远不应该有多个具有相同 id 的元素。

【参考方案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>

【讨论】：

您将如何修改它以自动播放下一个视频，同时将上一个视频重置为开头？