Javascript 悬停时自动播放视频

我正在尝试创建一个音乐网站

但我陷入了这样的境地：当我的观众将鼠标悬停在

缩略图上时，我需要向他们展示这段音乐视频包含的内容（基本上是5秒的视频）

视频的大小（高度和宽度）应等于
缩略图的大小

这是我的密码


*{
边际：0px；
填充：0px；
}
身体{
背景色：#F2F2；
字体系列：“RobotDraft”，“Roboto”，无衬线；
-webkit字体平滑：抗锯齿；
}
* {
-webkit框大小：边框框；
框大小：边框框；
}
h5{
边际：0px；
字号：1.4em；
字号：700；
}
p{
字体大小：12px；
}
.中心{
高度：100vh；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*非必要结束*/
1.房地产证{
保证金：5px；
高度：18em；
宽度：14em；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
位置：相对位置；
-webkit过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
-o型过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
边界半径：16px；
溢出：隐藏；
-网络工具包盒阴影：15px 15px 27px#e1e1e3，-15px-15px 27px#ffffff；
盒影：15px 15px 27px#e1e1e3，-15px-15px 27px#ffffff；
}
/*^--放置阴影时必须使用边距底部，否则在某些情况下会被剪裁*/
/*卡的上半部分，图像*/
1.物业形象{
高度：15公分；
宽度：14em；
填料：1米2米；
位置：绝对位置；
顶部：0px；
-webkit过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
-o型过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
背景图像：url（'https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg');
背景尺寸：封面；
背景重复：无重复；
}
/*底卡部分*/
.物业说明{
背景色：#FAFC；
身高：5公分；
宽度：14em；
位置：绝对位置；
底部：0em；
-webkit过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
-o型过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
填充物：0.5em 1em；
文本对齐：居中；
}
/*社会偶像*/
.社会偶像{
宽度：1米；
高度：1米；
背景色：黑色；
位置：绝对位置；
底部：1米；
左：1米；
-webkit过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
-o型过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
}
/*财产卡在各州悬停*/
.属性卡：悬停。属性说明{
高度：0em；
填充：0px1em；
}
.属性卡：悬停。属性图像{
高度：18em；
}
.财产卡：悬停。财产社交图标{
背景色：白色；
}
.属性卡：悬停。属性社交图标：悬停{
背景色：透明；
}

放松
卡片标题
龙舌兰。我叫霍乔。Mixwell Chingo。更多宾果游戏。知识是很难的

您可以使用
视频
上的
海报
属性作为占位符图像。然后，您只需要添加一个事件监听器，供在元素内外徘徊的用户使用。您的代码中似乎没有任何与视频相关的内容，因此我在下面举了一个示例：

您的HTML：

<div class="video-container">
<video id="my_video" controls poster="/path/to/image.jpg"> <!-- put your image here -->
  <source src="/path/to/video.mp4" type="video/mp4"> <!-- path to your video here -->
</video>
</div>

object-fit
将使视频的尺寸扩展以填充其容器

最后，你的JS：

let myVideo = document.getElementById("my_video");

myVideo.addEventListener("mouseover", () => {
    this.play();
});

myVideo.addEventListener("mouseleave", () => {
    this.pause();
});

您可以使用
视频
上的
海报
属性作为占位符图像。然后，您只需要添加一个事件监听器，供在元素内外徘徊的用户使用。您的代码中似乎没有任何与视频相关的内容，因此我在下面举了一个示例：

您的HTML：

<div class="video-container">
<video id="my_video" controls poster="/path/to/image.jpg"> <!-- put your image here -->
  <source src="/path/to/video.mp4" type="video/mp4"> <!-- path to your video here -->
</video>
</div>

object-fit
将使视频的尺寸扩展以填充其容器

最后，你的JS：

let myVideo = document.getElementById("my_video");

myVideo.addEventListener("mouseover", () => {
    this.play();
});

myVideo.addEventListener("mouseleave", () => {
    this.pause();
});

您可以添加视频元素并将其隐藏。将
onmouseover
事件侦听器添加到您的图像中，当鼠标悬停在图像上时播放视频5秒钟，并在5秒钟视频预览后显示图像


var video=document.getElementById（'video'））
var image=document.getElementById（'image'））
image.onmouseover=函数（）{
video.style.display='block'
image.style.display='none'
视频播放（）
setTimeout（函数（）{
视频暂停（）
video.currentTime=0
video.style.display='none'
image.style.display='block'
}, 5000)
}
*{
边际：0px；
填充：0px；
}
身体{
背景色：#F2F2；
字体系列：“RobotDraft”，“Roboto”，无衬线；
-webkit字体平滑：抗锯齿；
}
* {
-webkit框大小：边框框；
框大小：边框框；
}
h5{
边际：0px；
字号：1.4em；
字号：700；
}
p{
字体大小：12px；
}
.中心{
高度：100vh；
宽度：100%；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*非必要结束*/
#录像带{
保证金：5px；
高度：18em；
宽度：14em；
显示：无；
适合对象：封面
}
1.房地产证{
保证金：5px；
高度：18em；
宽度：14em；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
位置：相对位置；
-webkit过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
-o型过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
过渡：所有0.4s立方贝塞尔（0.645,0.045,0.355,1）；
边界半径：16px；
溢出：隐藏；
-网络工具包盒阴影：15px 1