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

Question

我正在为我正在进行的项目制作视频和图片库。我希望能够拥有更大的 img/video，然后是一系列缩略图，当您将鼠标悬停在它们上方时，这些缩略图会更改为更大的 img/video。试图复制这样的东西 https://angel.co/payward-kraken .

我已经能够使用图像进行交换，但无法找到如何使用视频进行交换。关于如何做到这一点的任何想法？我对 jquery 有点陌生，所以我还不完全了解。

这是我目前所拥有的:

Javascript

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

HTML

<div id="divVideo"> 
   <video width="543" height="362"controls> <source src="assets/img/Traackr.mp4" type="video/mp4" /> 
   </video>
</div>
<div id="imgDetail">
                <img src="assets/img/ebuzzing1.png" alt="" id="bigImg" class="img-responsive"/>
            <ul>
                <li><img src="assets/img/ebuzzing1.png" class="thumb" /></li>
                <li><img src="assets/img/ebuzzing2.png"  class="thumb" /></li>
                <li><img src="assets/img/ebuzzing3.png" class="thumb" /></li>
                <li><img src="assets/img/ebuzzing4.png"  class="thumb" /></li>
                <li><img src="assets/img/ebuzzing5.png" class="thumb" /></li>
                <li><img src="assets/img/ebuzzing6.png"  class="thumb" /></li>
        </ul>
        </div>

提前致谢。

Answer 1

我会更新您的 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>

将您的 javascript 更新为以下...

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;
});

我没有对此进行测试，但从 Apple Turorial 中获取了很多细节

更新

所以我们想用视频替换图片，而不是更改视频源。这是非常不同的。您将需要一个图像元素和一个视频元素。您还需要确定哪个项目是视频缩略图。我使用了 video 类来执行此操作。在以下示例中，我已将最终列表项设为视频缩略图。

HTML

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

添加以下 CSS 以在页面加载时隐藏视频

#imgDetail video
{
    display:none;
}

现在使用以下内容更新您的 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

});

在此处查看实际效果:http://jsfiddle.net/Xb25p/