Question

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

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

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(); 
}

Answer 1

您可以使用以下jQuery代码

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

悬停时自动播放html视频？

1 个答案: