以特定的iframe ID为目标

Question

我有一个有多个youtube视频的页面。我想视频播放时，有人点击对应于每个视频的链接。

例如:当有人点击视频2链接时，视频2播放。

HTML

   <!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<iframe id="ytplayer" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
  frameborder="0"></iframe>
<a href="#" id="start">Video 1</a>
<br><hr>
<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<iframe id="ytplayer2" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/WdkT4_OJ2WU?enablejsapi=1"
  frameborder="0"></iframe>
<a href="#" id="start">Video 2</a>

JQUERY

    var ytplayer;
function onYouTubeIframeAPIReady() {
    ytplayer = new YT.Player('ytplayer', {
    });
}
$(document).ready(function () {
    $("#start").click(function () {
        ytplayer.playVideo();
    });
});

这是我的JSFIDDLE只有点击视频1工作。

Answer 1

这是一个像你期望的那样工作的演示。

我已经删除了第二个脚本标签，并修改了第二个iframe和a标签的id。

var ytplayer, ytplayer2;
function onYouTubeIframeAPIReady() {
    ytplayer = new YT.Player('ytplayer', {});
    ytplayer2 = new YT.Player('ytplayer2', {});
}
$(document).ready(function () {
    $("#start").click(function () {
        ytplayer.playVideo();
        return false;
    });
    $("#start2").click(function () {
        ytplayer2.playVideo();
        return false;
    });
});

html部分:

<!-- This loads the YouTube IFrame Player API code -->
<script src="http://www.youtube.com/player_api"></script>
<iframe id="ytplayer" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
  frameborder="0"></iframe>
<a href="#" id="start">Video 1</a>
<br><hr>
<iframe id="ytplayer2" type="text/html" width="640" height="390"
  src="http://www.youtube.com/embed/WdkT4_OJ2WU?enablejsapi=1"
  frameborder="0"></iframe>
<a href="#" id="start2">Video 2</a>