javascript - 悬停视频交换

Question

我一直在尝试为我正在开发的网站进行视频交换。我想为我悬停的图像更改更大的图像。我可以进行图像交换，但是当我尝试添加视频时，它崩溃了。有人知道我能做什么吗？

<div id="imgDetail">
   <video width="546" height="362" controls>
<source src="assets/img/ebuzzing3" type="video/mp4" class="img-responsive"  id="bigImg">
Your browser does not support the video tag.
   </video>
<ul>
       <li><video width="320" height="240" controls>
     <source src="assets/img/ebuzzing3" type="video/mp4" class="img-responsive" id="bigImg">
    Your browser does not support the video tag.
   </video></li>
       <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>



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

Answer 1

如果我理解正确，这可能会有所帮助:

HTML

<div id="imgDetail">
    <video width="546" height="362" controls id="video">
        <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" class="img-responsive" id="bigImg">Your browser does not support the video tag.</video>
    <ul>
        <li  ><img data-source='http://www.w3schools.com/html/movie.mp4' src="http://placehold.it/100x100" > </li>
        <li  ><img data-source='http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4' src="http://placehold.it/100x100" ></li>
          <li  ><video data-source='http://www.w3schools.com/html/movie.mp4' width="100" height="100" controls>
        <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" class="img-responsive" id="bigImg">Your browser does not support the video tag.</video></li>
    </ul>
</div>

JQuery:

$('#imgDetail img,video').on("mouseover", function () {



    $('#video').attr('src', $(this).data('source'));

});

http://jsfiddle.net/6fU76/1/

我不确定您想要小视频作为大视频的缩略图，还是普通图像缩略图......所以，这两个选项都存在。由于灵 active ，我使用了自定义数据属性...

编辑:更新 fiddle : <强> http://jsfiddle.net/6fU76/7/