时间戳

首页 > 解决方案 > 通过将鼠标悬停在 div 上开始视频

html - 通过将鼠标悬停在 div 上开始视频

问题描述

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

//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/ 干杯，感谢您的帮助！

标签： htmljqueryvideomouseover

解决方案

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

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

推荐阅读