我正在测试一个视频滑块，它在上一个视频结束时播放下一个视频。它在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添加到我的视频标签中