setTimeout 结合 onmouseout

Question

我正在尝试延迟获得“onmouseout”功能。这样当你移动鼠标时，视频returns几秒后就会出现在海报上。下面的代码瞬间returns你到海报onmouseout.

<video class="content" 
    poster="/video/test.jpg"
    width="320" 
    height="240"  
    loop onmouseover="this.play()" 
    onmouseout="this.load();" >
        <source src="/video/test.mp4" type="video/mp4">
  </video>

下面的代码是一个工作示例，我可以在 onmouseout 延迟后开始工作：

 <video class="content" 
        poster="/video/test.jpg"
        width="320" 
        height="240"  
        loop onmouseover="this.play()" 
        onmouseout="myFunction();" >


        <script>
            function myFunction() {
              setTimeout(function(){ alert("Hello"); }, 3000);
            }
            </script>

<source src="/video/test.mp4" type="video/mp4">
</video>

如何在 setTimeout 中获取“this.load”？

Answer 1

setTimeout 接受一个函数作为其第一个参数，因此您可以将 this.load 作为第一个参数传递并在 onmouseout 属性中使用它：

<video  class="content" 
        poster="/video/test.jpg"
        width="320" 
        height="240"  
        loop 
        onmouseover="this.play()" 
        onmouseout="setTimeout(this.load.bind(this), 3000)" >
    <source src="/video/test.mp4" type="video/mp4">
</video>

编辑：我有一个错误（抱歉）我现在使用绑定函数将视频元素绑定到 load 函数。然而，这不是最好的方法，因为如果您使用 onmouseout 属性或任何其他附加事件的 HTML 属性，您只能附加一个 onmouseout 事件。在大多数情况下，您会想要附加多个。所以更好的解决方案是使用 addEventListener 方法：

HTML:

<video  id="content-video"
        class="content" 
        poster="/video/test.jpg"
        width="320" 
        height="240" >
    <source src="/video/test.mp4" type="video/mp4">
</video>

JS:

const video = document.getElementById("content-video");
video.addEventListener("mouseover", function() {
    video.play();
}, false);
video.addEventListener("mouseout", function() {
    setTimeout(video.load.bind(video), 3000);
}, false);

编辑：对于这些错误，我真的很抱歉。我修复了它们，现在可以使用了。

setTimeout 结合 onmouseout

setTimeout in combination with onmouseout

html

javascript

onmouseout

settimeout