关于轮播视频切换的问题

img


用的是bootstrap的框架,不知道怎么去让视频播放完毕后才会切换到下一个视频
以下是源代码

<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators video-g flex">
        <div data-target="#carouselExampleIndicators" data-slide-to="0" class="active video-s">
            <video class="fit" loop muted src="img/Pexels%20Videos%202818559.mp4"></video>
        </div>
        <div data-target="#carouselExampleIndicators" data-slide-to="1" class="video-s">
            <video class="fit" loop muted src="img/Pexels%20Videos%202818564.mp4"></video>
        </div>
        <div data-target="#carouselExampleIndicators" data-slide-to="2" class="video-s">
            <video class="fit" loop muted src="img/video.mp4"></video>
        </div>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <!--轮播视频-->
            <div class="video">
                <video class="fit" id="video1" autoplay muted loop src="img/Pexels%20Videos%202818559.mp4"
                ></video>
            </div>
            <!--轮播视频 结束-->
        </div>
        <div class="carousel-item">
            <!--轮播视频-->
            <div class="video">
                <video class="fit" id="video2" autoplay loop muted src="img/Pexels%20Videos%202818564.mp4"
                ></video>
            </div>
            <!--轮播视频 结束-->
        </div>
        <div class="carousel-item">
            <!--轮播视频-->
            <div class="video">
                <video class="fit" id="video3" autoplay loop muted src="img/video.mp4"></video>
            </div>
            <!--轮播视频 结束-->
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

    // 获取第一个video元素
    let mainVideo = null;
    // 获取所有类名为video-s的盒子做出循环
    document.querySelectorAll('.video-s').forEach(item => {
// 返回第一个video元素的节点的属性集合
        let video = item.querySelector('video');
        // 返回一个添加一个当鼠标指针进入(穿过)元素时,改变元素的背景黄色的事件和
        item.addEventListener('mouseenter', () => {
            mainVideo = document.querySelector('.carousel-item.active').querySelector('video');
            //使第一个video元素暂停
            mainVideo.pause();
// 开始
            video.play();
        });
        // 当鼠标离开元素时.背景颜色变为灰色
        item.addEventListener('mouseleave', () => {
            //使第一个video元素开始
            mainVideo.play();
            //暂停
            video.pause();
        });
    });

参考这个:https://blog.csdn.net/xingchen678/article/details/100877403

你好,你轮播可以做个判断进行轮播的
下面这个是播放完进行跳转。你参考一下


```html
<video id="MyVideo" src="images/vd.mp4" autoplay muted controls style="width:100%;display:block;margin:0px auto;height:auto"></video>

JS:

<script>
            myVid=document.getElementById("MyVideo");
            myVid.addEventListener('ended',function(){undefined
                window.location.href="https:*****.com";
            });
        </script>


```