我为视频做了一些javascript，比如当你把鼠标悬停在视频上时该视频将播放，当您将鼠标悬停在视频之外时，视频将暂停
但我想做更多，我想在视频暂停时在视频上显示海报，我已将海报包含在视频属性中。。我想对所有不同海报的视频使用相同的javascript
这是我目前正在使用的代码
<!DOCTYPE HTML>
<html>
<head>
<title>video hover</title>
<style>
</style>
</head>
<body>
<video controls loop data-play="Hover" preload="auto" poster="MyPoster.jpg" height="300" width="500" muted="muted">
<source src="Myvideo.mp4" type="video/mp4">
</video>
<script type="text/javascript">
var vid=document.getElementsByTagName("video");
[].forEach.call(vid,function(item){
item.addEventListener('mouseover',hovervideo,false);
item.addEventListener('mouseout',hidevideo,false);
});
function hovervideo(e)
{
this.play();
}
function hidevideo(e)
{
this.pause();
}
</script>
</body>
</html>
这里是JSFiddle：https://jsfiddle.net/vpoL6a5w/1/
如Anurag Srivastava提供的链接中所建议。在此处显示覆盖是您的最佳选择。
您可以通过将视频包装在div元素中，并添加一个与视频海报具有相同src的图像作为封面来实现这一点。
在悬停函数中，您可以选择一个同级并添加/删除隐藏类。
示例：
<!DOCTYPE HTML>
<html>
<head>
<title>video hover</title>
<style>
.video-wrapper {
position: relative;
}
.cover-img {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
width: 100%;
height: auto;
}
.cover-img.hidden {
display: none;
}
</style>
</head>
<body>
<div class="video-wrapper" height="300" width="500">
<video controls loop data-play="Hover" preload="auto" poster="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" height="300" width="500" muted="muted">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"/ type="video/mp4">
</video>
<img class="cover-img hidden" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" />
</div>
<script type="text/javascript">
var vid=document.getElementsByTagName("video");
[].forEach.call(vid,function(item){
item.addEventListener('mouseover',hovervideo,false);
item.addEventListener('mouseout',hidevideo,false);
});
function hovervideo(e)
{
var coverImg = e.target.parentNode.children[1];
coverImg.classList.add('hidden')
this.play();
}
function hidevideo(e)
{
var coverImg = e.target.parentNode.children[1];
coverImg.classList.remove('hidden')
this.pause();
}
</script>
</body>
</html>