gpt4 book ai didi

javascript - 将鼠标悬停在按钮上以加快视频速度,当不悬停按钮时,视频将恢复相同的速度

转载 作者:行者123 更新时间:2023-11-28 14:59:11 24 4
gpt4 key购买 nike

当我将鼠标悬停在按钮上时,底部的 JavaScript 不起作用,背景中的视频保持相同的速度。我不太确定我做错了什么。谢谢。

<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<div id="myVideo" class=video-background>
<video autoplay loop>
<source src="space.mp4" type="video/mp4">
</video>
</div>
<div id="text-background">
<h1 class="a"><a id="link1" onmouseover="setPlaySpeed" onmouseout="getPlaySpeedF" href="home.html"
style="text-decoration:none;">Welcome</a></h1>
</div>
<div class="footer">
<p>~TEST~</p>
</div>
<script>
var x = document.getElementById("myVideo");

function setPlaySpeed() {
x.playbackRate = 0.1;
}

function getPlaySpeed() {
x.playbackRate = 1
}
</script>
</body>
</html>

最佳答案

在你的 onmouseover 和 onmouseout 事件中,你应该调用这些函数,而不仅仅是引用它们

<a id="link1" 
onmouseover="setPlaySpeed()"
onmouseout="getPlaySpeed()"
href="home.html"
style="text-decoration:none;">Welcome</a>

您还应该获取视频元素而不是 div 包装器元素

var x = document.querySelector("video");

如果你想加速视频,setPlaySpeed 函数中的 playbackRate 应该大于 1,像这样:

function setPlaySpeed() {
x.playbackRate = 1.5;
}

关于javascript - 将鼠标悬停在按钮上以加快视频速度,当不悬停按钮时,视频将恢复相同的速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50545166/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com