Question

我正在为我正在进行的项目制作视频和图片库。我希望能够有一个更大的img /视频，然后是一系列缩略图，当你将鼠标悬停在它们上面时，会更改为更大的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，将图片包装在视频网址的链接中。有点像...

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

Answer 2

更改视频标记的来源（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>

将鼠标悬停在缩略图上时，如何为其他视频进行视频交换？

2 个答案: