Html 使用YouTube进行电子学习

我有一个HTML页面，每个页面有30个指向YouTube视频的链接。所有视频都属于同一YouTube频道。 HTML页面还提供了一个YouTube播放器。 我试图弄清楚以下是否可行（可能不使用PHP）：单击链接后，视频播放器将刷新同一页面并显示视频。页面本身不会刷新-只有视频播放器会刷新。 除了PHP还有其他选项吗？

---

有人能帮我找到一些超级简单的指南吗？（…“低于初学者”级别）。

如果您不想刷新页面，那么您唯一的选择就是JavaScript（即，您必须在客户端执行该操作）。

您如何与youtube链接？是否使用

iframe

标记？如果您使用的是

iframe

，则只能在同一页面中查看所有视频。页面将不会刷新

---

如果不是这种情况，请更具体。

您可以使用jquery来实现这一点。在链接的href属性中，使用视频的嵌入url，如下代码所示

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {      
        $('a').click(function() {
            $('iframe').attr('src', $(this).attr('href'));
            return false;
        });
    })
</script>

<iframe width="560" height="315" src="http://www.youtube.com/embed/J5x5gduEWtI" frameborder="0" allowfullscreen></iframe>

<br><br>
<a href='http://www.youtube.com/embed/J5x5gduEWtI'>Link1</a>
<a href='http://www.youtube.com/embed/WmDmUDXxeXU'>Link2</a>
<a href='http://www.youtube.com/embed/UNlgAuMWuvw'>Link3</a>

$（文档）.ready（函数（）{
$（'a'）。单击（函数（）{
$（'iframe'）.attr（'src'，$（this.attr（'href'））；
返回false；
});
})

编辑： 这也会起作用

<iframe id='iframe' width="560" height="315" src="http://www.youtube.com/embed/J5x5gduEWtI" frameborder="0" allowfullscreen></iframe>

<br><br>
<a href='http://www.youtube.com/embed/J5x5gduEWtI' target='iframe'>Link1</a>
<a href='http://www.youtube.com/embed/WmDmUDXxeXU' target='iframe'>Link2</a>
<a href='http://www.youtube.com/embed/UNlgAuMWuvw' target='iframe'>Link3</a>

您可以通过将youtube播放器保存在具有某些ID（例如：ID=“playerFrame”）的iframe中来实现。然后在相关的超链接（“a”标记）中，将iframe的id作为“target”属性的值

<iframe id="playerFrame"></iframe>
<a href="http://youtubeurl" target="playerFrame">Click to see video 1</a>

看