悬停时自动播放html视频？答案

【问题标题】：Autoplay html video on hover?悬停时自动播放html视频？
【发布时间】：2017-04-03 20:16:05
【问题描述】：

我在互联网上搜索并找到了一些很好的示例，但由于某种原因，当我尝试用我的代码实现它们时，它不起作用。我无法弄清楚我似乎做错了什么..

（对于荷兰语的班级名称，我很抱歉，希望它不会太混乱）。对不起，如果我对此真的很愚蠢。

HTML：

<div class="drievijfde-wrapper portfolio-wrapper">
    <div class="single-item singlevidjs drievijfde-padding" style="background-image:url(img/work-placeholder.png); background-position: center center; background-size: cover;">
        <video loop preload="auto" id="portfolio-vid">
            <source src="video/test reel_1.mp4" type="video/mp4">
        </video>  
        <a href="#">
            <div class="metadata">
                Interior Lamps
            </div>
        </a>
    </div>
</div>

JS：

var figure = $(".singlevidjs").hover( hoverVideo, hideVideo );

function hoverVideo(e) {  
    $('video', this).get(0).play(); 
}

function hideVideo(e) {
    $('video', this).get(0).pause(); 
}

【问题讨论】：

首先，请在描述问题时更详细一点：我的代码不工作，不会帮助任何人；）无论如何，这是一个工作 jsbin：jsbin.com/cupusesoce/edit?html,js,output 所以问题一定是: jQuery 未加载或您的视频有问题 :)
它正在工作here 检查您的jquery 添加了吗？
是的！我在某个地方搞砸了 Jquery，我现在感觉很糟糕。谢谢你指出这一点。是的@DincaAdrian，当我这样做时我也感到畏缩，但这只是为了测试。谢谢

标签： javascript jquery html

【解决方案1】：

您可以为此使用以下jQuery 代码

$('#portfolio-vid').mouseover(function(){
    $(this).get(0).play();
}).mouseout(function(){
    $(this).get(0).pause();
})

【讨论】：