社区您好，
我在我的网站上使用 Scroll Magic 实现了一种效果，可以在用户向下滚动页面时播放视频。此效果在其他浏览器中完美运行，但我在 Google Chrome 中遇到了严重的性能问题。
问题描述：
视频在 Chrome 上明显卡顿，而在其他浏览器中则播放流畅。 我已经检查过，在我的网站上没有遇到任何其他值得注意的性能问题。 这个问题似乎是 Chrome 特有的，因为我在其他浏览器中没有观察到这种卡顿现象。
这是我的JS代码：
const intro = document.querySelector('.intro');
const video = intro.querySelector('video');
const text = intro.querySelector('h1');
//END SECTION
const section = document.querySelector('section');
const end = section.querySelector('h1');
//SCROLL MAGIC
const controller = new ScrollMagic.Controller();
//SCENES
let scene = new ScrollMagic.Scene({
duration: 9000,
triggerElement: intro,
triggerHook: 0
})
.addIndicators()
.setPin(intro)
.addTo(controller);
//TEXT ANIMATION
const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0});
let scene2 = new ScrollMagic.Scene({
duration: 3000,
triggerElement: intro,
triggerHook: 0
})
.setTween(textAnim)
.addTo(controller);
//VIDEO ANIMATION
let accelAmount = 0.1;
let scrollPos = 0;
let delay = 0;
scene.on("update", e => {
scrollPos = e.scrollPos / 1000;
});
setInterval(() =>{
delay += (scrollPos - delay) * accelAmount;
video.currentTime = delay;
}, 10);
我的 HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AxB|Home</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="intro">
<h1>Make it floating</h1>
<video src="Images/Floating2.mp4"></video>
</div>
<section>
<h1>REVOLUTIONARRY</h1>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"
integrity="sha512-8Wy4KH0O+AuzjMm1w5QfZ5j5/y8Q/kcUktK9mPUVaUoBvh3QPUZB822W/vy7ULqri3yR8daH3F58+Y8Z08qzeg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"
integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.js"
integrity="sha512-UgS0SVyy/0fZ0i48Rr7gKpnP+Jio3oC7M4XaKP3BJUB/guN6Zr4BjU0Hsle0ey2HJvPLHE5YQCXTDrx27Lhe7A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.js"
integrity="sha512-judXDFLnOTJsUwd55lhbrX3uSoSQSOZR6vNrsll+4ViUFv+XOIr/xaIK96soMj6s5jVszd7I97a0H+WhgFwTEg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.js"
integrity="sha512-mq6TSOBEH8eoYFBvyDQOQf63xgTeAk7ps+MHGLWZ6Byz0BqQzrP+3GIgYL+KvLaWgpL8XgDVbIRYQeLa3Vqu6A=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>
还有我的 CSS 代码：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
}
.intro{
height: 100vh;
}
.intro video{
height: 100%;
width: 100%;
object-fit: cover;
}
.intro h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 80px;
color: white;
}
section{
height: 100vh;
color: black;
}
section h1{
padding-top: 300px;
text-align: center;
font-size: 80px;
}
到目前为止我尝试过的：
我缩小了视频的尺寸以提高性能，但问题仍然存在。 我一直在寻找特定于 Chrome 的视频性能问题解决方案，但到目前为止没有成功。
HTML5 视频无法自动播放，除非像这样静音...
<video src="Images/Floating2.mp4" muted></video>
但是，您使用的一些第三方库显然克服了这个问题并在后台自动播放......大概有声音？
那么，我们是否因为未能将播放器静音而与浏览器发生冲突？
添加静音参数来尝试一下，看看效果如何。