html - 如何使用同一页面上的单独链接更改嵌入式视频？

Question

我有一个使用 iframe 嵌入的视频。只是您从 YouTube 获得的标准代码。

我一直在网上寻找解决方案。该解决方案是我将在嵌入式视频下方有一个表格，每个表格条目都是一个链接。当用户单击链接时，嵌入的视频将更改为该视频。

到目前为止，我发现的只是需要将 .mp4、.ogg、.webm 视频存储在托管服务器上的视频播放器。

任何代码甚至是正确方向的一点都将不胜感激。

Answer 1

这是我满足您要求的快速演示http://jsbin.com/oyuxon/1/edit

一般来说，我不知道您的播放器如何处理视频 URI，所以这只是建议：

• 将视频 URI 保存在每个项目的data属性中。li我不知道你为什么需要 atable但我认为列表在语义上更合适。您也可以修改为使用表格。
• 您使用 JavaScript（我使用 jQuery）来处理click每个li元素中的事件，将播放器的视频 URI 替换data为 this 的属性值li。

希望这对你有用。