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

Question

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

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

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

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

Answer 1

这是我针对您的要求进行的快速演示 http://jsbin.com/oyuxon/1/edit

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

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

希望这对你有用。