jQuery。暂停视频超时

Question

我的网站上有多个具有相同课程的视频。

我只想在将鼠标悬停在一个视频上时播放它。我一移除悬停，视频就暂停了 1 秒。

我学会了如何开始和暂停视频。但是，一旦我添加 setTimeout，我就会收到一个错误： Uncaught TypeError: Cannot read properties of undefined (reading 'pause')

下面我附上我的解决方案的html代码：

<a href="#" class="cases__item">
   <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

<a href="#" class="cases__item">
   <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

<a href="#" class="cases__item">
   <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

我还附上了我的解决方案的 html 代码：

            var figure = $(".cases__item").hover( hoverVideo, hideVideo );

            function hoverVideo(e) {
                $('.cases__item-video', this).get(0).play();
            }

            function hideVideo(e) {
                setTimeout(function (){
                    $('.cases__item-video', this).get(0).pause();
                }, 1000);
            }

我还用我的代码添加了工作 jsfiddle：https://jsfiddle.net/v7certb6/1/

请帮我解决一秒钟后的视频暂停问题。

如果有任何帮助，我将不胜感激。

Answer 1

问题是因为setTimeout() 函数处理程序中的this 指的是该函数，而不是在调用外部hoverVideo() 或hideVideo() 函数时提供的元素引用。

要解决此问题，请在外部范围内创建一个变量以保留您在 setTimeout() 中使用的对 this 的引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<a href="#" class="cases__item">
  <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

<a href="#" class="cases__item">
  <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

<a href="#" class="cases__item">
  <video class="cases__item-video" playsinline="true" loop="" preload="metadata" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>
</a>

var figure = $(".cases__item").hover(hoverVideo, hideVideo);

function hoverVideo(e) {
    let _this = this;
  $('.cases__item-video', _this).get(0).play();
}

function hideVideo(e) {
  let _this = this;
  setTimeout(function() {
    $('.cases__item-video', _this).get(0).pause();
  }, 1000);
}

Example Fiddle - 请注意，由于跨站点内容在主 SO 站点上播放时出现问题，因此该示例处于困境中。

附带说明一下，JS 可以简化为以下内容，仅使用箭头函数具有完全相同的行为：

$(".cases__item").hover(
  e => e.currentTarget.querySelector('.cases__item-video').play(), 
  e => setTimeout(() => e.currentTarget.querySelector('.cases__item-video').pause(), 1000));