Javascript 如何通过悬停视频更改图像

我想在浏览器上做一些与netflix页面非常相似的事情。 我得到了一个图像，当它悬停时，它的比例会改变，但我想用播放歌曲的视频来替换图像。我曾尝试禁用/启用悬停，但我遇到了一个问题：播放的视频总是相同的（当然是因为我使用了相同的id）。 我使用JQuery检测悬停，然后播放视频，使用getElementById获取视频本身。。。 以下是我的javascript代码：

$(document).ready(function(){
    $('a').hover(function(){
        Show()
        Play()
    }, function(){
        Pause()
        UnShow()
    });
});


const myVideo = document.getElementById("video");

function Play() {
    myVideo.play();
}

function Pause() {
    myVideo.pause();
}

和我的HTML代码：

我的吉他网站
亚历克·本杰明——慢慢让我失望
雷克斯橙郡-灯芯绒之梦
您的浏览器不支持视频标记。

我不太喜欢jQuery，但这里有一个基本概念。可以按如下所示添加海报属性。这应该显示图像

<video controls poster="/images/cool-image.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg"
</video>

悬停关闭 停止视频并添加海报属性：

function Play() {
    var poster = $(vid).attr("poster");

    $(vid).attr("poster","");

    myVideo.play();        
}

function Pause() {
    var poster = $(vid).attr("poster");

    $(vid).attr("poster", "poster.png");

    myVideo.pause();       
}

---

同样，我不是一个jQuery的家伙，但总的来说，我相信这会奏效

您是否使用HTML5视频播放器？是的，使用mp4文件。您的HTML标记不同，因此第一个视频中的a标记包装图像和视频，而第二个仅包装视频。从代码的外观来看，缺少了很多步骤。1.你需要参考所有的视频，就像你用querySelectorAll 2做的那样。您必须循环遍历这些引用，并使用事件委派查找当前悬停的引用。3.然后在你有了正确的视频对象之后，完成你在代码中显示的其余部分。嗨，活动委派不仅仅是为了“点击”吗？但是它成功了，非常感谢你！！！我使用这个网站是为了更好地了解活动代表团。这只是一个图像，但我有信心，谢谢！首先感谢你的回答，视频正在播放！但问题是（每个视频都有相同的id，也就是“#video”），我有几个不同的图像（和视频），当我悬停其中一个时，它总是播放第一个视频…我道歉，很难想出一个逐字逐句的解决方案，因为没有真正的代码可以查看。是的，对不起，我不好，我理解，但这实际上是一个完整的js文件。你想看看我的html代码吗？我知道即时流行的soloution不存在，这太容易了，但我感谢你的帮助！你应该给每个视频一个唯一的id。比如

…

，然后使用选择器来获取所有视频，而不是

#video

谢谢，使用querySelector（'video'），错误视频的问题消失了（或多或少，不应该发生检测很奇怪），但第二个视频没有播放。使用querySelectorAll（'video'））视频没有播放，但正常播放。谢谢你的帮助，我已经为此挣扎了将近两天了