鼠标悬停按钮控制视频播放速度功能失效求助

Hey there, let's break down why your hover speed control isn't working—there are a few small but critical issues in your code:

Key Problems Identified #

• You're targeting the wrong element: The x variable is grabbing the <div id="myVideo"> container, but the playbackRate property belongs to the actual <video> element inside that div. The div itself doesn't have video playback controls.
• Function call syntax errors:
  • In your onmouseover and onmouseout attributes, you wrote the function names without parentheses (setPlaySpeed instead of setPlaySpeed()). Without parentheses, the browser won't execute the function—it just references it.
  • There's a typo in your onmouseout handler: you used getPlaySpeedF, but your defined function is named getPlaySpeed.

Corrected Code #

<!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="getPlaySpeed()" href="home.html" style="text-decoration:none;">Welcome</a>
    </h1> 
  </div> 
  <div class="footer"> 
    <p>~TEST~</p> 
  </div> 
  <script> 
    // Get the actual video element inside the myVideo div
    var x = document.querySelector("#myVideo video"); 
    function setPlaySpeed() { 
      x.playbackRate = 0.1; 
    } 
    function getPlaySpeed() { 
      x.playbackRate = 1; 
    } 
  </script> 
</body> 
</html>

What Changed? #

1. Fixed element selection: Used document.querySelector("#myVideo video") to directly grab the <video> tag inside the container div.
2. Fixed function calls: Added parentheses to setPlaySpeed() and getPlaySpeed() in the hover attributes so the functions run when the events trigger.
3. Fixed typo: Changed getPlaySpeedF to getPlaySpeed to match the function definition.

Now when you hover over the "Welcome" link, the video should slow down to 0.1x speed, and return to normal 1x speed when you move your mouse away.

内容的提问来源于stack exchange，提问作者Nabeel Ahmed