通过将鼠标悬停在 div 上启动视频

如何解决通过将鼠标悬停在 div 上启动视频

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

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

//pause video on mouse leave
$(document).on('mouseleave',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/ 干杯并感谢您的帮助！

解决方法

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

$(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 文件下方。

你可以这样使用

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