首页 > 解决方案 > 引导轮播视频不重播

问题描述

我有一个图像和视频的轮播。视频,第一次播放没有问题,但是当我的轮播结束并重新启动时,视频不会重播。这是我的代码

     <div class="top-content">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0"  class='active' ></li>
                <li data-target="#myCarousel" data-slide-to="1"   ></li>
                <li data-target="#myCarousel" data-slide-to="2"   ></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item  active">
                    <video style="margin-bottom: 100px;width:100%;height:100%;" muted autoplay> 
                        <source src="resources/video1.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="carousel-item " style="background-image: url(resources/90210.jpg);"></div>
                <div class="carousel-item " style="background-image: url(resources/90219.jpg);"></div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <script>
        $( document ).ready(function() {
            $('video').on('play', function (e) {
                $("#myCarousel").carousel('pause');
            });
            $('video').on('stop pause ended', function (e) {
                $("#myCarousel").carousel();
                $("#myCarousel").carousel('next');
            });
        });
      
    </script>

标签: jqueryvideocarouselreplay

解决方案


推荐阅读