Question

试图找出最佳方法。我有一个主视频播放器从Vimeo中提取视频。在这个主要播放器下面是其他视频的缩略图。当用户点击缩略图时，我希望它能够使缩略图视频取代主视频。

Vimeo嵌入都是基于iFrame的。我不确定是否应该替换整个iFrame，或者只是替换URL等。还有主要内容和缩略图之间的大小差异;不确定是否会自动传输或Vimeo代码将足够聪明以调整大小。并且Jquery点击是否可以覆盖缩略图通常期望播放小视频的点击？

HTML

<div class="blogPlayer">
    <iframe src="#" width="528" height="297" frameborder="0"></iframe>
</div>

<ul class="blogThumbnails>
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li>
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li>
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li>
</ul>

这个jQuery完全未经测试并在现场完成，但正在思考......

$('.blogThumbnails li').click(function(){
   var video = $(this).html();
   $('.blogPlayer').replaceWith('video');
})

Answer 1

您应该只替换src文件而不是替换整个iframe。如果要替换整个iframe，则需要调整所单击列表的属性。

这就是我的想法：

<div>
      <iframe src="#" id="blogPlayer" width="528" height="297" frameborder="0"></iframe>
</div>

$('.blogThumbnails li').click(function(){
   var url = $(this).attr('src');
   $('#blogPlayer).attr('src', url);
   return false;
})

如果你选择其他路线，你需要调整宽度和高度：

$('.blogThumbnails li').click(function(){
   var video = $(this).html();
   $('.blogPlayer')
          .replaceWith(video)
          .attr({
                  width: '528',
                  height: '297'
          });
   return false;
})

jQuery - On Click用新内容替换iFrame内容

1 个答案: