0

如果您在这里查看此页面，您会发现我创建了一些 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>

谢谢！

4

1 回答 1

0

jQuery(".flex-video")在您的 javascript 控制台中运行它。你会看到有三个具有该类的 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]);
于 2013-03-15T15:05:08.563 回答