通过将鼠标悬停在 div 上开始视频答案

【问题标题】：Starting a video by hovering over a div通过将鼠标悬停在 div 上开始视频
【发布时间】：2021-03-16 11:13:51
【问题描述】：

当我将视频悬停时，我使用此解决方案来启动视频（每个单独）：

//play video on hover
$(document).on('mouseover', 'video', function() { 
$(this).get(0).play(); 
}); 

//pause video on mouse leave
$(document).on('mouseleave', 'video', function() { 
$(this).get(0).pause(); 
});

效果非常好。但实际上我想在悬停标题时开始播放视频（所以另一个 div，在悬停自己的标题时分别开始每个视频）。有人对此有解决方案吗？

我的标题在一个名为 »video-titles« 的 div 中，我的视频嵌入如下：

<HTML Embed>
 <div id="w-embed">
 <video class="video" position= "absolute" top= "0px" margin= "0 auto" height= "auto" width= "100%" preload="auto" muted loop>
 <source src="myvideo.mp4" type='video/mp4;' />
 </video>   
 </div>

这是我的网站：https://monkeyberlin-preview-3a28-d94aa03c105a2.webflow.io/ 干杯并感谢您的帮助！

【问题讨论】：

Does anyone has a solution for that? -> 是的，如果您可以显示 HTML 部分。否则没有
将它添加到您的问题中，以及在您给定的 HTML 代码中title 的位置？
抱歉，请查看更新，感谢您的快速回复

标签： html jquery video mouseover

【解决方案1】：

是的，这是一个当您悬停视频标题时播放视频的示例。

$(document).ready(function() {
  $(".video_inside h3").hover(function() {
    $(this).parent().children('video')[0].play();
  }, function() {
    var el = $(this).parent().children("video")[0];
    el.pause();
    el.currentTime = 0;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video_inside">
  <video preload="auto" muted="muted" loop>
        <source src="https://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
        <source src="https://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
    </video>
  <h3>Video Title</h3>
</div>

注意：请务必将 JS 代码粘贴到 jQuery 文件下方。

【讨论】：

你可以在 codepen 找到工作代码。 codepen.io/hassanmehmood/pen/YzpMeLo
您忘记将 jQuery.js 添加到 sn-p。我为您添加了它，以节省人们不得不去异地查看代码的工作
我已经在注释中提到过，以确保您已经添加了 jQuery 文件 :) 还是谢谢 :)
这是迄今为止唯一有效的方法，但只要标题与视频在同一个 div 中。但我的标题位于视频上方 z-index 1 的 div 中。

【解决方案2】：

你可以这样使用

$(document).ready(function() {
  $('#title').hover(function() {
    $('#video').get(0).play(); 
    }); 
  });

【讨论】：

嗨，谢谢，我的标题在一个单独的 div 中，然后它似乎不起作用......