jQuery。暂停视频超时

Question

我的网站上有几个视频具有相同的 class。

我只想将鼠标悬停在一个视频上时播放它。一旦我移除悬停，视频就会延迟 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() 或 [=16= 时提供的元素引用] 函数。

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

中使用该变量

<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 - 请注意示例位于 fiddle 中，因为 cross-site 内容在 SO 主站点上播放时存在问题。

作为旁注，JS 可以简化为以下内容，其仅使用箭头函数具有完全相同的行为：

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

jQuery。暂停视频超时

jQuery. Pause video with timeout

html

javascript

video

jquery

html5-video