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悬停时播放视频

悬停播放视频

1 个答案: