Question

在我的文档中，我有两个独立的嵌入式YouTube播放器。第一个标识为player1，第二个标识为player2。

<div id="1" class="track">
    <iframe width="560" height="315" src="//www.youtube.com/embed/1G4isv_Fylg?enablejsapi=1" frameborder="0" allowfullscreen id="player1"></iframe>
</div>

<div id="2" class="track">
    <iframe width="560" height="315" src="//www.youtube.com/embed/fXSovfzyx28?enablejsapi=1" frameborder="0" allowfullscreen id="player2"></iframe>
</div>

我有三个按钮：＆＃34;播放＆＃34;，＆＃34;暂停＆＃34;和＆＃34;跳过＆＃34;。

<div id="play-button">play</div>
<div id="pause-button">pause</div>
<div id="skip-button">skip</div>

我希望skip按钮更改受play和pause按钮影响的视频。

目前我有这个：

JS：

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


var player; 
var playerNumber = 1;

function onYouTubePlayerAPIReady() {
    // create the global player from the specific iframe
    player = new YT.Player('player' + playerNumber, {
        events: {
        // call this function when player is ready to use
        'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {

    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
        player.playVideo();
    });

    var pauseButton = document.getElementById("pause-button");
    pauseButton.addEventListener("click", function() {
        player.pauseVideo();
    });

    var skipButton = document.getElementById("skip-button");
    skipButton.addEventListener("click", function() {
        player.stopVideo();
        playerNumber = 2;
    }); 
}

我的问题是从playerNumber功能中更改'onReady'不会改变播放器。我需要一种方法让skip按钮更改受play和pause按钮影响的播放器。

对类似问题here有一个答案，但那里的问题只涉及两个参与者，因此在那里给出解决方案需要为每个玩家player1 = new YT.Player('player1'...等进行长时间声明，并作为我的页面最终会有很多玩家，如果我可以改变playerNumber变量，我会更喜欢它。我计划为其他玩家提供ID player3，player4等

作为初学者，如果我错误地使用了任何术语，我会道歉，我非常感谢可能提供的任何帮助。谢谢。

更改受自定义按钮影响的嵌入式YouTube播放器

0 个答案: