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/

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

编辑：更新小提琴：的 http://jsfiddle.net/6fU76/7/

视频交换与悬停

1 个答案: