代码：
<html>
<body>
<section>
<video src="smoke.mp4" autoplay muted></video>
<div id="player">
<audio autoplay hidden>
<source src="Playstation 4 StartUp Sound Effect.mp3" type="audio/mpeg"> #PROBLEM
</audio>
</div>
<h1>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</h1>
</section>
<style>
body
{
margin: 0;
padding: 0;
background:black;
}
section
{
height:100vh;
background:#000;
}
video
{
object-fit:cover;
}
h1
{
margin:0;
padding:0;
position:absolute;
top:50%;
transform: translateY(-50%);
width:100%;
text-align:center;
color:#ddd;
font-size:5em;
font-family:sans-serif;
letter-spacing:0.2em;
}
h1 span
{
display:inline-block;
animation: animate 1s linear forwards;
}
@keyframes animate
{
0%
{
opacity:0;
transform: rotateY(90deg);
filter:blur(10px);
}
100%
{
opacity:1;
transform: rotateY(0deg);
filter:blur(0px);
}
}
h1 span:nth-child(1)
{
animation-delay: 1s;
}
h1 span:nth-child(2)
{
animation-delay: 1.5s;
}
h1 span:nth-child(3)
{
animation-delay: 2s;
}
h1 span:nth-child(4)
{
animation-delay: 2.5s;
}
h1 span:nth-child(5)
{
animation-delay: 3s;
}
h1 span:nth-child(6)
{
animation-delay: 3.75s;
}
h1 span:nth-child(7)
{
animation-delay: 4s;
}
</style>
</body>
<script>
document
.querySelector('video')
.addEventListener('ended', function(e) {
e.target.style.display = 'none';
});
</script>
</html>当欢迎消息开始出现在屏幕上时，我希望播放器在后台播放音频文件而不出现，但我添加的内容不起作用。我如何解决这个问题？另外，是否可以将播放器的速度设置为默认值？我必须加快速度，以便文本和音乐同步
声音文件链接：https://djlunatique.com/playstation-4-start-up-sound-effect/
视频文件链接：https://drive.google.com/file/d/1ncI67cgjRGoQZHF6I0dEpXwvFwCKxFPK/view
浏览器版本： chrome 合金108.0.5359.99
1条答案
按热度按时间w80xi6nr1#
我已经试过你的代码了，看起来很好用，see here
也许是文件名上的空格有问题，还有一个简单的方法可以用JS中的playbackRate属性来改变视频/音频速度（默认速度为1）。例如：
所有这些代码都在我之前链接的页面中，所以你可以很容易地改变速度和复制粘贴
**编辑：**我忘了说，谷歌浏览器有一个特殊的错误，影响mp3文件，如果音频不工作，我建议你尝试在另一个浏览器（或可能改变你的音频格式类型）.