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();
    });
});

HERE IS MY JSFIDDLE 只有点击视频1才有效。

Answer 1

这是一个demo，可以按预期工作。

我删除了第二个脚本标记并修改了第二个iframe和标记的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>

希望这有帮助。

定位特定的iframe ID？

1 个答案: