javascript - 悬停时播放 HTML5 视频

Question

我对鼠标悬停时如何播放/停止视频有疑问。用户将鼠标放在图像上，视频开始在图像的位置播放，当它移动时，图像返回，视频消失。有可能吗？怎么做？我尝试了一些东西，但我没有得到我想要的东西。

$(document).on('ready', function() {
  $('.image').on('mouseover', function() {
    $('.video-preview').toggleClass('video-preview-show');
  })
})

.image img {
  width: 272px;
  height: 160px;
}

.video-preview {
  width: 272px;
}

.video-preview {
  display: none
}

.video-preview-show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="image">
  <img src="https://content.active.com/Assets/Active.com+Content+Site+Digital+Assets/Cycling/Galleries/Cyclists+Should+Never+Do/cyclist-front.jpg">
</div>

<video class="video-preview lazy-hidden" playsinline="" autoplay="" muted="" loop="" width="100%" src="https://giant.gfycat.com/VerifiableTerrificHind.mp4"></video>

在 Codepen 上查看

Answer 1

试试这个

<div  onclick ="clicksound.playclip()" onMouseover="mouseoversound.playclip()">
            <video width="400px" height="auto" muted id="video1" onmouseover="this.play()" onmouseout="this.pause()">
              <source src="http://mazwai.com/system/posts/videos/000/000/140/preview_mp4_2/joel_gerlach--rain-shot_in_los_angeleswith_the_panasonic_gh4.mp4" type="video/mp4">

              Your browser does not support HTML5 video.
            </video>
    </div>

Answer 2

试试下面的代码。这将帮助你

$('.image').hover(function() {
  $('.video-preview').addClass('video-preview-show');
},
function() {
  $('.video-preview').removeClass('video-preview-show');
});