我希望旋转木马停止循环后，视频播放，但也当它暂停或视频结束，循环应恢复。 这段代码在除了IE以外的大多数浏览器中都能工作，但是我想不出如何让它即使在IE中也能工作，你有什么想法吗？
<?php
ob_start();
?>
<!DOCTYPE html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hellk</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="icon" href="img/icon.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Amethysta' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Caesar+Dressing' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Start Video Section -->
<div class="clip-container">
<h1><span class="fire">K</span>
<span class="burn">L</span>
<span class="burn">I</span>
<span class="fire">P</span>
<span class="fire">Y</span>
</h1>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-pause=>
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<iframe id="player1" width="100%" height="100%" src="https://www.youtube.com/embed/1RHSrSVcPGI?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<div class="carousel-item">
<iframe id="player2" width="100%" height="100%" src="https://www.youtube.com/embed/6KRlz9ZTpbw?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<div class="carousel-item">
<iframe id="player3" width="100%" height="100%" src="https://www.youtube.com/embed/meRKYpo6W7A?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<div class="carousel-item">
<iframe id="player4" width="100%" height="100%" src="https://www.youtube.com/embed/JFJwZDSJrUo?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<div class="carousel-item">
<iframe id="player5" width="100%" height="100%" src="https://www.youtube.com/embed/TV4EFQNJuOo?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
<div class="carousel-item">
<iframe id="player6" width="100%" height="100%" src="https://www.youtube.com/embed/5cZ1HC-wFeo?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</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>
</div>
<!-- End Video Section -->
<script>
const menuBtn = document.querySelector('.menu');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
if (!menuOpen) {
menuBtn.classList.add('open');
menuOpen = true;
} else {
menuBtn.classList.remove('open');
menuOpen = false;
}
});
menuBtn.addEventListener('mouseover', () => {
menuBtn.classList.add('hover');
menuHover = true;
});
menuBtn.addEventListener('mouseout', () => {
menuBtn.classList.remove('hover');
menuHover = true;
});
function menuClose() {
document.querySelector('.menu').classList.remove('open');
menuOpen = false;
}
const mychat = document.getElementById('chat');
const mychaticon = document.getElementById('chat-icon');
let chatn = false;
mychaticon.addEventListener('click', () => {
if (chatn == false) {
mychat.style.transition = '1.5s';
mychat.style.opacity = '1';
mychat.style.visibility = 'visible';
chatn = true;
$(".chat-icon").addClass('clicked');
} else {
mychat.style.opacity = '0';
mychat.style.visibility = 'hidden';
chatn = false;
$(".chat-icon").removeClass('clicked');
}
});
mychaticon.addEventListener('mouseover', () => {
mychaticon.style.backgroundColor = 'white';
$(".chat-icon").addClass('change');
});
mychaticon.addEventListener('mouseout', () => {
mychaticon.style.backgroundColor = 'gray';
$(".chat-icon").removeClass('change');
});
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
var mybutton = document.getElementById("scroll");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.opacity = "1";
mybutton.style.visibility = "visible";
} else {
mybutton.style.opacity = "0";
mybutton.style.visibility = "hidden";
}
}
document.getElementById('scroll').addEventListener('mouseover', () => {
document.getElementById('scroll').style.backgroundColor = "rgba(0,0,0,.6)";
});
document.getElementById('scroll').addEventListener('mouseout', () => {
document.getElementById('scroll').style.backgroundColor = "rgba(0,0,0,.25)";
});
function onStateChange(event) {
var embedCode = event.target.getVideoEmbedCode();
event.target.playVideo();
if (document.getElementById('embed-code')) {
document.getElementById('embed-code').innerHTML = embedCode;
}
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player1', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player2', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player3', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player4', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player5', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player6', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
switch (event.data) {
case 0:
$("#carouselExampleIndicators").carousel('cycle');
console.log("End");
break;
case 1:
$("#carouselExampleIndicators").carousel('pause');
console.log("Start");
break;
case 2:
$("#carouselExampleIndicators").carousel('cycle');
console.log("Pause");
break;
}
}
</script>
<!--- Script Source Files -->
<script src="js/rellax.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js"></script>
<!--- End of Script Source Files -->
<script type="text/javascript">
var rellax = new Rellax('.rellax');
const clipScroll = gsap.utils.toArray('.carousel.slide');
clipScroll.forEach((iframe) => {
ScrollTrigger.create({
trigger: iframe,
toggleClass: 'scroll',
start: "top 85%",
end: "end -50%"
})
});
const streamScroll = gsap.utils.toArray('.stream');
streamScroll.forEach((iframe) => {
ScrollTrigger.create({
trigger: iframe,
toggleClass: 'scroll',
start: "top 80%",
end: "end -70%"
})
});
const chatScroll = gsap.utils.toArray('.chat-icon');
chatScroll.forEach((span) => {
ScrollTrigger.create({
trigger: span,
toggleClass: 'scroll',
start: "top 100%",
end: "end 20%"
})
});
const linksScroll = gsap.utils.toArray('.links');
linksScroll.forEach((div) => {
ScrollTrigger.create({
trigger: div,
toggleClass: 'scroll',
start: "top 50%",
end: "end -15%"
})
});
const linksBgScroll = gsap.utils.toArray('.links-bg');
linksBgScroll.forEach((div) => {
ScrollTrigger.create({
trigger: div,
toggleClass: 'scroll',
start: "top 90%",
end: "end 10%"
})
});
const voteScroll = gsap.utils.toArray('.vote-container');
voteScroll.forEach((span) => {
ScrollTrigger.create({
trigger: span,
toggleClass: 'scroll',
start: "top 80%",
end: "end -10%"
})
});
</script>
<script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>
<?php
ob_end_flush();
?>
下面是脚本部分，我用它来找出视频的状态（播放，暂停，结束）
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player1', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player2', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player3', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player4', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player5', {
events: {
'onStateChange': onPlayerStateChange
}
});
player = new YT.Player('player6', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
switch (event.data) {
case 0:
$("#carouselExampleIndicators").carousel('cycle');
console.log("End");
break;
case 1:
$("#carouselExampleIndicators").carousel('pause');
console.log("Start");
break;
case 2:
$("#carouselExampleIndicators").carousel('cycle');
console.log("Pause");
break;
}
}
我也是初学者，所以我很肯定这段代码可以用较小的规模来写，但是我想知道哪段代码做什么，然后我可以开始用一些技巧来缩小代码。
网址:https://hellk.funsite.cz/
一旦你点击了视频，YT播放器就会花费一些时间来加载和播放视频。 同时，在播放视频之前，旋转木马正在移动到下一张幻灯片。 您可以通过在onPlayerStateChange方法中使用多一个switch case event.data=-1参数来防止这种行为。
null
function onPlayerStateChange(event) {
switch (event.data) {
// pause carousel when video is about to load
case -1:
$("#carouselExampleIndicators").carousel('pause');
break;
case 0:
$("#carouselExampleIndicators").carousel('cycle');
console.log("End");
break;
case 1:
$("#carouselExampleIndicators").carousel('pause');
console.log("Start");
break;
case 2:
$("#carouselExampleIndicators").carousel('cycle');
console.log("Pause");
break;
}
}