Javascript 当我将鼠标悬停在缩略图上时，如何为不同的视频进行视频交换？

我正在为一个项目制作一个视频和图像库。我希望能够有一个更大的img/视频，然后是一系列缩略图，当你悬停在它们上面时，这些缩略图将切换到更大的img/视频。试图复制这样的东西

我已经能够使用图像进行交换，但还无法找到如何使用视频进行交换。有什么办法可以帮你吗？我对jquery有点陌生，所以我还没有完全理解

这就是我到目前为止所做的：

Javascript

$('#imgDetail li img').hover(function(){
        $('#bigImg').attr('src',$(this).attr('src'));
});

HTML

---

提前谢谢

更改视频标记的源（

src

）后，需要再次加载视频对象。大概是这样的：

$("#divVideo video")[0].load();

同样为了更改源，您应该更改视频标记内的源标记的

src

$('#divVideo video source').attr('src', videoFile);

DOM:

<div id="divVideo">
<video controls>
<source src="test1.mp4" type="video/mp4" />
</video>

---

我会更新您的HTML，将图像包装在视频URL的链接中。类似于

<div id="imgDetail">
    <img src="assets/img/ebuzzing1.png" alt="" id="bigImg" class="img-responsive"/>
    <ul>
        <li>
           <a href="/url/to/video1.mp4><img src="assets/img/ebuzzing1.png" class="thumb" /></a>
        </li>
        <li>
           <a href="/url/to/video2.mp4><img src="assets/img/ebuzzing2.png"  class="thumb" /></a>
        </li>
        <li>
           <a href="/url/to/video3.mp4><img src="assets/img/ebuzzing3.png" class="thumb" /></a>
       </li>
       <!--- Etc--->
    </ul>
</div>

我并没有测试过这个，但从一个

更新

因此，我们希望用视频替换图像，而不是更改视频源。这是非常不同的。您需要一个图像元素和一个视频元素。此外，您还需要确定哪个项目是视频thumnail。我用了一个

视频
类来做这个。在下面的示例中，我将最后一个列表项设置为视频缩略图

HTML

现在使用以下内容更新javascript：

$('#imgDetail li img').not(".video").hover(function(){
        $('#imgDetail video').hide(); //Hide the video if it's showing;
        $('#bigImg').show(); //Show the image if it's hidden       
        $('#bigImg').attr('src',$(this).attr('src')); //Update the image source
});

$('#imgDetail li img.video').hover(function(){
        $('#bigImg').hide();//Hide the image if its showing
        $('#imgDetail video').show(); //Show The video
        //$('#imgDetail video').get(0).play(); //Optional, Play The video

});

在这里看到它的实际效果：
你有个人视频播放吗？如果是这样的话，你是如何把它放在你的页面上的？看看如何使用类似FlowPlayer（）的附加库。我已经使用了flowplyer，它有一个相当全面的API可以使用。我已经能够用我现在的格式播放单个视频，但是当我悬停在其余的图像上时，没有任何变化。当我只做图像时，一切都很好。有什么想法吗？我也在调查Flowplayer。谢谢你的建议。你能在播放视频的地方添加代码吗？当然。这就是我编辑它的目的。我将第一行替换为：，然后img列表与上面相同。我还删除了div id=“imgDetail”，并将其更改为div id=divvideo。在$（'bigImg'）.attr（'src'，$（this.attr（'src'））之后，我应该在哪里包括它；？为了让我更了解，为什么每次都需要重新加载视频对象？首先，这不是视频对象的正确dom。请参阅我共享的dom。您需要更正src更改并加载到鼠标上。是的，我更改了dom。我不确定js如何工作。这对图像也有效吗？是的但是你不必对图像使用load。它们会加载到src change tooI上。我测试了它，它会使图像/视频“闪烁”“变成白色，但实际上并没有改变它。你知道我能做些什么使
项成为bigImg吗？这是我正在处理的页面。当我在视频中使用html时，它会将视频添加到顶部，而不是替换较大的img。有什么想法吗？这段视频是用来代替图像的吗？视频和图像不能直接交换。它们是完全不同的元素。如果是这样的话，那就是隐藏一个，展示另一个。从你的页面很难知道你想要什么。我希望视频是列表中的一个缩略图，你可以悬停在上面。它应该是视频的缩略图，这样就不会有不同的元素。
var myVideo = $("#divVideo video");

$('#imgDetail li a').hover(function(){
        var vidURL = $(this).attr('href');
        myVideo.src = vidURL;
        myVideo.load();
        myVideo.play();
}).click(function(){
    //Disable nav if link clicked
    return false;
});

<div id="imgDetail">
<video  width="320" height="240" controls>
    <source src="http://theinfluence.co/assets/img/Traackr.mp4" type="video/mp4" />
</video>
    <img src="http://theinfluence.co/assets/img/traackr2.png" id="bigImg" />
    <ul>
        <li>
            <img src="http://theinfluence.co/assets/img/ebuzzing1.png" class="thumb" />
        </li>
        <li>
            <img src="http://theinfluence.co/assets/img/ebuzzing2.png"  class="thumb" />
        </li>
        <li>
            <img src="http://theinfluence.co/assets/img/ebuzzing3.png" class="thumb" />
       </li>
       <!-- Note the addition of the video class on the image -->
        <li ><img src="http://theinfluence.co/assets/img/ebuzzing4.png" class="thumb video" /></li>
       <!--- Etc--->
    </ul>
</div>

#imgDetail video
{
    display:none;
}

$('#imgDetail li img').not(".video").hover(function(){
        $('#imgDetail video').hide(); //Hide the video if it's showing;
        $('#bigImg').show(); //Show the image if it's hidden       
        $('#bigImg').attr('src',$(this).attr('src')); //Update the image source
});

$('#imgDetail li img.video').hover(function(){
        $('#bigImg').hide();//Hide the image if its showing
        $('#imgDetail video').show(); //Show The video
        //$('#imgDetail video').get(0).play(); //Optional, Play The video

});