Chrome 中的 Dreamweaver 测试滑块不工作

Dreamweaver testing slider in Chrome not working

我正在测试一个视频滑块,它会在上一个视频结束时播放下一个视频。 它在 Dreamweaver 中有效,但在 Chrome 中无效。是不是因为Chrome不能运行onended或者smth?

HTML / JS

<head>
    <link href="Sliderteststyle2.css" rel="stylesheet" />    
</head>
<body>
<div class="container">
    <video autoplay  id="video1" class="video1">
        <source src="Komp 1.mp4" type="video/mp4">
    </video>
    <video   id="video2" class="video2">
        <source src="Komp 2.mp4" type="video/mp4">
    </video>
    <video   id="video3" class="video3">
        <source src="Komp 3.mp4" type="video/mp4">
    </video>
    <video   id="video4" class="video4">
        <source src="Komp 4.mp4" type="video/mp4">
    </video>
        <video   id="video5" class="video5">
        <source src="Komp 5.mp4" type="video/mp4">
    </video>
        <video   id="video6" class="video6">
        <source src="Komp 6.mp4" type="video/mp4">
    </video>
</div>


</body>
</html>
<script>

var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');
var video3 = document.getElementById('video3');
var video4 = document.getElementById('video4');
var video5 = document.getElementById('video5');
var video6 = document.getElementById('video6');

function imgTransition(){
    imagen1.style.opacity=0;
    video1.play();
    video1.style.opacity=1;
}
video1.onended = function(){
    video2.play();
    video1.style.opacity=0;
    video2.style.opacity=1;
}
video2.onended = function(){
    video3.play();
    video2.style.opacity=0;
    video3.style.opacity=1;
}
video3.onended = function(){
    video4.play();
    video3.style.opacity=0;
    video4.style.opacity=1;
}
video4.onended = function(){
    video5.play();
    video4.style.opacity=0;
    video5.style.opacity=1;
}
video5.onended = function(){
    video6.play();
    video5.style.opacity=0;
    video6.style.opacity=1;
}
video6.onended = function(){
    video1.play();
    video6.style.opacity=0;
    video1.style.opacity=1;
}

</script>

CSS

*{
    padding:0;
    margin:0;

}

video{
    width:100%;
    height:100%;
    position:absolute;
    object-fit:cover;
    transition: all 1.2s linear;
    z-index: -10;
}

.video1{
    opacity:1;
}
.video2{
    opacity:0;
}
.video3{
    opacity:0;
}
.video4{
    opacity:0;
}
.video5{
    opacity:0;
}
.video6{
    opacity:0;
}


.imagenes{
    opacity:0;
    transition:opacity 2s;
    width:100%;
    height:100%;
    position:absolute;
    object-fit:cover;
    z-index: -10;
}

.container {
    width:100%;
    height:100%;
}

我所要做的就是将 muted 添加到我的视频标签中