html - 添加一个选项以通过我页面上的链接更改嵌入的 vimeo 视频

Question

这是我所拥有的截图

现在在 Gigi 和 Bob 下，我有 5 个歌曲链接。我想将这些直接链接到我页面中的 vimeo 播放器，以便例如当用户单击 Gigi 下的“Silence”歌曲链接时，视频将转到这首歌。

Gig 下歌曲列表的当前 html 是

<ul>
    <li><a href="#">L'Amour</a></li>
    <li><a href="#">Bla Bla Bla</a></li>
    <li><a href="#">The Riddle</a></li>
    <li><a href="#">Another Way</a></li>
    <li><a href="#">Silence</a></li>
</ul>

对于 vimeo 视频，它是

<section id="player">
    <iframe src="https://player.vimeo.com/video/105778399" width="200" height="150" frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</section>

Answer 1

如果您只是想播放具有嵌入 url 的视频，那么您可以将链接定位到iframe. 您只需要nameiframetarget上的属性和链接上的属性：

演示

<a href="https://player.vimeo.com/video/45196609?autoplay=1" target="VimeoPlayer">L'Amour</a>

<section id="player">
    <iframe src="https://player.vimeo.com/video/105778399" name="VimeoPlayer" width="200" height="150" frameborder="1" webkitallowfullscreen mozallowfullscreen allowfullscreen>
    </iframe>
</section>

如果您想要更复杂的东西，有一个 API 允许您使用 JavaScript 将 Vimeo 播放器集成到您的网站中：https ://github.com/vimeo/player.js