Question

如果您查看this page here，您会看到我创建了一些Youtube视频库。当它工作时，它应该替换页面主要部分（顶部）中的视频与单击的缩略图，右侧的文本也替换为与该视频相关的文本。

文本替换似乎工作得很好但是我遇到了一个问题，在交换期间，iFrame似乎被多次放置，因此视频播放2-3次。

Javascript在下面 - 这是我错过的东西吗？

<script>
function replaceVideo(id) {
  originalSrc = jQuery("iframe", "#" + id).attr("src");
  autoPlay = originalSrc + "&autoplay=1";
  jQuery("iframe", "#" + id).attr("src", autoPlay);
  video = jQuery(".video-wrap", "#" + id).html();
  jQuery(".flex-video").html(video);
  text = jQuery(".video-description", "#" + id).html();
  jQuery(".vid_desc").html(text);
  jQuery("iframe", "#" + id).attr("src", originalSrc);
}

jQuery(".video-list li").click(function() {
  id = jQuery(this).attr("id");
  replaceVideo(id);
});

    jQuery(window).load(function() {
  if(window.location.search.substring(1)) {
        element = window.location.search.substring(1).split('&');
        if (document.getElementById(element[0])) {
            document.onload = replaceVideo(element[0]);
        }
    }
});
</script>

谢谢！

Answer 1

在您的javascript控制台中运行jQuery(".flex-video")。你会看到有三个div有这个类。所以jQuery(".flex-video").html(video);这行JS将3个元素的内部HTML更改为iframe。

<div class="flex-video widescreen">
  <iframe width="583" height="328" src="http://www.youtube.com/embed/TWmFCX40BQc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>

您需要使上述div与其他flex-video帧区分开来。给父div一个id或另一个类或什么来查询。那样做，然后你就没事了。

编辑：顺便说一下，这段代码错了：

if(window.location.search.substring(1))
{
    element = window.location.search.substring(1).split('&');
    if (document.getElementById(element[0])) {
        document.onload = replaceVideo(element[0]);
    }
}

将document.onload设置为函数调用将调用replaceVideo并将onload属性设置为它返回的内容，这没什么。它似乎可以工作，因为视频播放，但那只是因为你正在调用replaceVideo方法。设置你的if，对你来说可能就足够了（除非你能解释为什么要把它设置为onload）

if(document.getElementById(element[0]))
     replaceVideo(element[0]);

JQuery多次替换iframe

1 个答案: