悬停播放视频

Question

<div class="video-grid-one">
    <video width="400" controls>
        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
      </video>
</div>


<div class="video-grid-two">
    <video width="400" controls>
        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        Your browser does not support HTML5 video.
      </video>
</div>

<div class="button"> Video one </div>
<div class="button"> Video two </div>

.button {
    height:45px;
    line-height: 45px;
    background: #000;
    color: #fff;
    padding: 0 20px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
    cursor: pointer;
}

大家好，我正在创建一个带有缩略图的滑块。并且其中有一些定制。有时，当我们将鼠标悬停在轮播图像上时，滑块应该会自动播放与我们悬停的图像相关的视频。在这里，我在上面附加了一些内容，当我们将鼠标悬停在按钮上时，视频应该会自动播放。你们能帮我吗？谢谢:)

没有可能吗？

Answer 1

<video id="video-one" width="400" controls>
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
</video>

将 id 添加到您的视频标签并在您的 html 文件中包含 jquery 添加脚本并将 id 添加到您的按钮 div

<div class="button" id="hover-one"> Video one </div>

<script>
$("#hover-one").hover(function(){
    $("#video-one")[0].play();
});
</script>

现在添加此脚本，它将在按钮 div 悬停时播放视频