0

我有一个包含多个 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>

查询 

    var ytplayer;

function onYouTubeIframeAPIReady() {
    ytplayer = new YT.Player('ytplayer', {

    });
}

$(document).ready(function () {
    $("#start").click(function () {
        ytplayer.playVideo();
    });
});

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

4

1 回答 1

1

这是一个按您预期工作的演示。

我已经删除了第二个脚本标签并修改了第二个 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>

希望这可以帮助。

于 2014-07-20T09:55:10.697 回答