通过将鼠标悬停在div上来启动视频
通过将鼠标悬停在div上来启动视频
提问于 2021-03-16 19: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-title«的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/干杯，谢谢你的帮助！
回答 2
Stack Overflow用户
发布于 2021-03-16 19:47:26
是的，这是一个当你悬停视频标题时播放视频的例子。
$(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文件下面。
Stack Overflow用户
发布于 2021-03-16 19:45:10
您可以像这样使用
$(document).ready(function() {
$('#title').hover(function() {
$('#video').get(0).play();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66654087
复制相关文章
相似问题
腾讯云开发者
