Javascript 如何在第一个视频滑块完成后自动播放

我有一个视频滑块，谁能帮我解决问题， 我想自动播放滑块，在一个结束后播放下一个并暂停悬停。 我已附上密码

var vid=document.getElementById（“myVideo”）；
var vid2=document.getElementById（“myVideo2”）；
var vid3=document.getElementById（“myVideo3”）；
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

---

这是一个想法。我不知道如何控制滑块是否工作

             //I assumed that all video tag have class .slider-video
            var allVideos = $(".slider-video");
            var countVideos = allVideos.length;
            var currentIndex = -1;
            allVideos.on("ended", function (evt) {
                currentIndex++;
                if (currentIndex > countVideos - 1) {
                    currentIndex = 0;
                } else {
                    //Auto Play next video.
                    allVideos[currentIndex].get(0).play();
                }
            });
            allVideos.on("play", function (evt) {
                currentIndex = allVideos.index(this);
            });
            allVideos.on("playing", function (evt) {
                currentIndex = allVideos.index(this);
                var v = $(this).get(0);
                v.controls = false;
            });
            //PREVENT CONTEXT MENU.
            allVideos.on("contextmenu", function (evt) {
                return false;
            });
            allVideos.on("mouseover", function (evt) {
                currentIndex = allVideos.index(this);
                var v = $(this).get(0);
                v.pause();
                v.controls = true;
            });
            allVideos.on("mouseout", function (evt) {
                currentIndex = allVideos.index(this);
                var v = $(this).get(0);
                v.play();
                v.controls = false;
            });

这是我的解决办法。 只需更新我们处理播放、暂停和结束事件的方式。 并使用另一种方法来管理幻灯片

playVideo=功能（视频）{
if（视频和视频长度）{
视频[0]。播放（）；
视频[0]。控件=true；
}
}
变量滑块=$（'.slideshow容器'）；
var setActiveSlide=函数（slideIndex，自动播放）{
常量activeSlide=slider.find（'.mySlides'）.eq（slideIndex）；
如果（！activeSlide）返回；
activeSlideIndex=slideIndex；
slider.find（'.mySlides'）.hide（）；//隐藏所有幻灯片
activeSlide.show（）；//显示活动幻灯片
$（'.bullets'）.find（'.dot'）.removeClass（'active'）；
$（'.bullets'）.find（'.dot'）.eq（slideIndex）.addClass（'active'）；
//暂停所有视频
slider.find（'video'）。每个（函数（elemIndex，elem）{
元素暂停（）；
});
如果（自动播放）{
播放视频（activeSlide.find（'video'）；
}
};
var-activeSlideIndex=0；
setActiveSlide（activeSlideIndex）；
var toNextSlide=函数（自动播放）{
//返回最后一张幻灯片
if（activeSlideIndex>=slider.find（'.mySlides'）.length）返回；
setActiveSlide（activeSlideIndex+1，自动播放）；
}
var toPrevSlide=函数（）{
//返回第一张幻灯片
如果（activeSlideIndex==0）返回；
setActiveSlide（activeSlideIndex-1）；
}
//添加事件侦听器
$（'.play button'）。在（'click'，函数（e）上{
var video=$（e.target）.parents（'.slideVideo'）.find（'video'）；
播放视频（视频）；
})
$（'video'）。打开（'play'，函数（e）{
$（e.target）.parents（'.slideVideo'）.addClass（'playing'）；
});
$（'video'）。打开（'pause'，函数（e）{
$（e.target）.parents（'.slideVideo'）.removeClass（'playing'）；
});
$（'video'）。on（'end'，函数（e）{
toNextSlide（真）；
});
*{框大小：边框框}
正文{字体系列：Verdana，无衬线；边距：0}
.mySlides{display:none}
img{垂直对齐：中间；}
/*幻灯片容器*/
.slideshow容器{
最大宽度：1000px；
位置：相对位置；
保证金：自动；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-22px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
}
/*标题文本*/
.文本{
颜色：#F2F2；
字体大小：15px；
填充：8px 12px；
位置：绝对位置；
底部：8px；
宽度：100%；
文本对齐：居中；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.active，.dot:悬停{
背景色：#717171；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*在较小的屏幕上，减小文本大小*/
@仅介质屏幕和（最大宽度：300px）{
.prev、.next、.text{font size:11px}
}
斯莱德维德先生{
保证金：0自动；
最大宽度：100%；
盒子阴影：0 20px 20px-5px rgba（0,0,0,0.1），0 10px 10px-5px rgba（0,0,0,0.04）！重要；
-webkit盒阴影：0 20px 20px-5px rgba（0,0,0,0.1），0 10px 10px-5px rgba（0,0,0,0.04）！重要信息；
-moz盒阴影：0 20px 20px-5px rgba（0,0,0,0.1），0 10px 10px-5px rgba（0,0,0,0.04）！重要；
-ms盒阴影：0 20px 20px-5px rgba（0,0,0,0.1），0 10px 10px-5px rgba（0,0,0,0.04）！重要信息；
-o盒阴影：0 20px 20px-5px rgba（0,0,0,0.1），0 10px 10px-5px rgba（0,0,0.04）！重要信息；
}
.幻灯片\u组\u视频{
身高：100%；
位置：相对位置；
宽度：100%；
}
slideVideo先生{
}
.slideVideo:第一个孩子{
显示：块；
}
.slideVideo:n个类型（1）{
背景色：黑色；
}
.slideVideo:n个类型（2）{
背景色：黑色；
}
.slideVideo:n个类型（3）{
背景色：黑色；
}
.slideVideo:n个类型（4）{
背景色：黑色；
}
.slideVideo_按钮{
位置：相对位置；
文本对齐：居中；
机器人程序
             //I assumed that all video tag have class .slider-video
            var allVideos = $(".slider-video");
            var countVideos = allVideos.length;
            var currentIndex = -1;
            allVideos.on("ended", function (evt) {
                currentIndex++;
                if (currentIndex > countVideos - 1) {
                    currentIndex = 0;
                } else {
                    //Auto Play next video.
                    allVideos[currentIndex].get(0).play();
                }
            });
            allVideos.on("play", function (evt) {
                currentIndex = allVideos.index(this);
            });
            allVideos.on("playing", function (evt) {
                currentIndex = allVideos.index(this);
                var v = $(this).get(0);
                v.controls = false;
            });
            //PREVENT CONTEXT MENU.
            allVideos.on("contextmenu", function (evt) {
                return false;
            });
            allVideos.on("mouseover", function (evt) {
                currentIndex = allVideos.index(this);
                var v = $(this).get(0);
                v.pause();
                v.controls = true;
            });
            allVideos.on("mouseout", function (evt) {
                currentIndex = allVideos.index(this);
                var v = $(this).get(0);
                v.play();
                v.controls = false;
            });