鼠标悬停触发对象时播放视频答案

【问题标题】：Play video when mouse hovers trigger object鼠标悬停触发对象时播放视频
【发布时间】：2022-02-13 15:58:05
【问题描述】：

我正在设计一个页面，我希望在用户悬停帖子时播放每个帖子的视频。我是这样设置的：

<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
   
<source src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>

</div>
</div>

<script> 
$(document).ready(function() {
  $(".playonhover").on("mouseover", function(event) {
    this.play();

  }).on('mouseout', function(event) {
    this.pause();

  });
})
</script>

这可行，但我实际上希望在悬停顶部 div（类 .project-link-block）时播放视频，而不是视频本身。有没有办法做到这一点？在 JS 中切换类不起作用。为此使用 Webflow，以防万一。

【问题讨论】：

标签： javascript html video

【解决方案1】：

你换班的时候是不是也换了this？切换班级后，视频元素不再是this。

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div class="project-link-block">
  <div class="video-cover">
    <video class="playonhover" height="100%" width="100%" muted playsinline loop data-object-fit="cover">
      <source
        src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
        type="video/mp4">
      Your browser doesn't support HTML5 video tag.
    </video>
  </div>
</div>
<script>
  $(document).ready(function () {
    $(".video-cover").on("mouseover", function (event) {
      $(".playonhover").get(0).play();
    }).on('mouseout', function (event) {
      $(".playonhover").get(0).pause();
    });
  })
</script>

【讨论】：

我没有！我在JS很新。应该改成什么？类名？
不是类名，而是对应于该类的 DOM 元素 (playonhover)。要获取元素，您应该选择它，就像您已经完成的那样，使用$(".playonhover")。
好吧，这样整个代码是这样的？ <script> $(document).ready(function() { $(".project-link-block").on("mouseover", function(event) { this.play(); }).on('mouseout', function(event) { this.pause(); }); }) </script> 不幸的是，这似乎不起作用。
我已经编辑了答案以包含代码。请注意，由于play & pause 不是 JQuery，您需要通过 get(0)。无论如何，它应该工作。让我知道你的情况。
嗨！这种工作，但问题是页面上有几个视频。当我实现它时，它只播放其中一个视频。是否有可能以某种方式将其连接到父 div？

【解决方案2】：

看看下面这段代码是否达到了你的预期结果。然后转换为 JQuery（如果需要）。

<!DOCTYPE html>
<html>
<body>

<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">

<!-- <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> -->
<source type="video/mp4"
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" 
>

Your browser doesn't support HTML5 video tag.
</video>

</div>
</div>

<script> 

window.addEventListener( "load", on_documentReady );

function on_documentReady() 
{
    //const myTargets = document.getElementsByClassName("playonhover");
    const myTargets = document.getElementsByClassName("project-link-block");

    for (var i = 0; i < myTargets.length; i++) 
    { 
        myTargets[i].onmouseover = handle_mouseOver;
        myTargets[i].onmouseout = handle_mouseOut;
    }
}

function handle_mouseOver( evt ) 
{
    //alert( "## was rolled over" );
    evt.target.play();
}

function handle_mouseOut( evt ) 
{
    //alert( "## was rolled out" );
    evt.target.pause();
}

</script>

</body>
</html>

【讨论】：