Javascript HTML5视频悬停播放

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

$（document）.on（'ready'，function（）{
$（'.image'）。在（'mouseover'，function（）上{
$（'.video preview'）.toggleClass（'video-preview-show'）；
})
})

。图像img{
宽度：272px；
高度：160px；
}
.视频预览{
宽度：272px；
}
.视频预览{
显示：无
}
.视频预览节目{
显示：块；
}

试试这个

<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>

您的浏览器不支持HTML5视频。

尝试下面的代码。这对你有帮助

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

演示：