Bootstrap - дождитесь окончания видео, прежде чем переходить к следующей карусели - PullRequest
Новая
       6

Bootstrap - дождитесь окончания видео, прежде чем переходить к следующей карусели

0 голосов
/ 10 мая 2018

Я хочу, чтобы моя карусель подождала окончания видео, прежде чем перейти к следующему слайду. Это мой код, я зацикливаю его в соответствии с количеством медиа-файлов в моей базе данных. 

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

Это работает для первого видео, затем, когда второе видео останавливается, оно не переходит к следующему слайду. Кто-нибудь может помочь? Спасибо.

1 Ответ

0 голосов
/ 10 мая 2018

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