使用 jQuery 在 youtube 和 Vimeo 源之间切换

Posted 2023-05-09

【中文标题】使用 jQuery 在 youtube 和 Vimeo 源之间切换

【英文标题】：Switch between youTube & Vimeo sources w/ jQuery

【发布时间】：2015-01-19 06:25:18

【问题描述】：

我有三个指向 YouTube 的有效链接。用户可以单击文本块，并且 iFrame 内的 URL 会更新。问题是，我无法让 Vimeo 或 Twitch 在第四个链接中播放。我已经尝试了我能想到的一切。我删除了 Vimeo 和 Twitch 链接，因为它们又长又麻烦。我现在可以使用任何视频。有什么建议吗？

<div class="videoHolder">
    <div id="descriptions">
    <div id= "vid1Link" class="vidDetails">
    <div id="text"><a href="http://www.youtube.com/embed/6ZDL5M0-DbM" target="someFrame">Video 1</a></div>
</div>

<div id= "vid2Link" class="vidDetails">
    <div id="text"><p><a href="http://www.youtube.com/embed/videoseries?list=PL13657A9E281737CD" target="someFrame">Video 2</a></div>
</div>

<div id= "vid3Link" class="vidDetails">
    <div id="text"><a href="http://www.youtube.com/embed/YVzkL8GuqKs" target="someFrame">Video 3</a></div>
</div>

<div id= "vid4Link" class="vidDetails">
    <div id="text" class="link4"><a href="http://www.youtube.com/embed/YVzkL8GuqKs" target="someFrame">Video 4</a></div>

</div>
</div>
<div class="videoPlayer">       
    <iframe name="someFrame" id="someFrame"   frameborder="0"></iframe> 
</div>
</div>

<script>

$('.link4').click(function()
  // ??
)
</script>

【参考方案1】：

请看这里：https://jsfiddle.net/fg4svu0r/1/embedded/result/

您只需提供所有资源的正确可嵌入链接。无需 JS。

<div class="videoHolder">
    <div id="descriptions">
    <div id= "vid1Link" class="vidDetails">
    <div id="text"><a href="https://www.youtube.com/embed/6ZDL5M0-DbM" target="someFrame">Video 1</a></div>
</div>

<div id= "vid2Link" class="vidDetails">
    <div id="text"><p><a href="https://www.youtube.com/embed/videoseries?list=PL13657A9E281737CD" target="someFrame">Video 2</a></div>
</div>

<div id= "vid3Link" class="vidDetails">
    <div id="text"><a href="https://www.twitch.tv/gsl/embed" target="someFrame">Video 3 - TWITCH</a></div>
</div>

<div id= "vid4Link" class="vidDetails">
    <div id="text" class="link4"><a href="https://player.vimeo.com/video/100902779?color=cc3232&api=1" target="someFrame">Video 4 - VIMEO</a></div>

</div>
</div>
<div class="videoPlayer">       
    <iframe name="someFrame" id="someFrame"   frameborder="0"></iframe> 
</div>
</div>