Question

我想拥有两个youtube播放器：
1.将是可变的，从开始到结束循环播放 2.将被隐藏，并将在循环中播放10秒到20秒。

我有两个实际上分开工作的脚本，但不能一起工作，我不知道如何将它们组合在一个函数中。

有人可以帮忙吗？

First player: https://pastebin.com/vhX2qJ5R         
Second player: https://pastebin.com/Pge6mM7q

这是隐藏的玩家循环：http://jsbin.com/zuxoxoqeko/edit?html,js,output

这是普通玩家：http://jsbin.com/bibafewave/edit?html,js,output

的Javascript

      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '560',
          videoId: 'Kf4GkHsRB2w',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
           event.target.setVolume(0);
       event.target.playVideo();
      }
      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
    //      setTimeout(stopVideo, 6000);
                  done = true;
        }
           event.target.setVolume(0);
      }





      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var section = {
  start: 30,
  end: 58
};

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player1;
function onYouTubeIframeAPIReady() {
  player1 = new YT.Player(
    'player1',
    {
      height: '0',
      width: '0',
      videoId: 'S5xDk7dnmbw',
      events: {
        'onReady': onPlayerReady1,
        'onStateChange': onPlayerStateChange1
      }
    }
  );
}

function onPlayerReady1(event) {
  player1.seekTo(section.start);
  player1.playVideo();
}

function onPlayerStateChange1(event) {
  if (event.data == YT.PlayerState.PLAYING) {
    var duration = section.end - section.start;
    setTimeout(restartVideoSection1, duration * 1000);
  }
}

function restartVideoSection1() {
  player1.seekTo(section.start);
}

HTML

<div class="video-embed" style="margin-left: auto;margin-right: auto;display: block; -webkit-box-shadow: 0 4px 10px -1px #C8C8C8; box-shadow: 0 4px 10px -1px #C8C8C8 !important;">
<div id="player">
</div>
</div>

<div class="video-embede" style="margin-left: auto;margin-right: auto;display: block; -webkit-box-shadow: 0 4px 10px -1px #C8C8C8; box-shadow: 0 4px 10px -1px #C8C8C8 !important;">
<div id="player1">
</div>
</div>

Answer 1

＆＃13;

//Video 1
var player;

function onPlayerReady(event) {
    event.target.setVolume(0);
    event.target.playVideo();
}
var done = false;

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        //      setTimeout(stopVideo, 6000);
        done = true;
    }
    event.target.setVolume(0);
}

//Video 2
var section = {
    start: 30,
    end: 58
};

var player1;

function onPlayerReady1(event) {
    player1.seekTo(section.start);
    player1.playVideo();
}

function onPlayerStateChange1(event) {
    if (event.data == YT.PlayerState.PLAYING) {
        var duration = section.end - section.start;
        setTimeout(restartVideoSection, duration * 1000);
    }
}

function restartVideoSection() {
    player1.seekTo(section.start);
}

//Render Video
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        videoId: 'Kf4GkHsRB2w',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
    player1 = new YT.Player(
        'player1', {
            height: '0',
            width: '0',
            videoId: 'S5xDk7dnmbw',
            events: {
                'onReady': onPlayerReady1,
                'onStateChange': onPlayerStateChange1
            }
        }
    );
}
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

＆＃13;

<div class="video-embed" style="margin-left: auto;margin-right: auto;display: block; -webkit-box-shadow: 0 4px 10px -1px #C8C8C8; box-shadow: 0 4px 10px -1px #C8C8C8 !important;">
<div id="player">
</div>
</div>

<div class="video-embede" style="margin-left: auto;margin-right: auto;display: block; -webkit-box-shadow: 0 4px 10px -1px #C8C8C8; box-shadow: 0 4px 10px -1px #C8C8C8 !important;">
<div id="player1">
</div>
</div>

＆＃13;

您为两者使用相同的元素和变量名称。为每个名称使用不同的名称。

Answer 2

我真的不知道为什么人们会轻易放弃，很快我就无法从账户中提出任何问题。

解决方案是：

      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player,player1;
      var section1 = {
      start: 30,
      end: 58
      };
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '560',
          videoId: 'Kf4GkHsRB2w',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
           event.target.setVolume(0);
       event.target.playVideo();
      }
      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
    //      setTimeout(stopVideo, 6000);
                  done = true;
        }
           event.target.setVolume(0);
      }


  player1 = new YT.Player(
    'player1',
    {
      height: '50',
      width: '50',
      videoId: 'S5xDk7dnmbw',
      events: {
        'onReady': onPlayerReady1,
        'onStateChange': onPlayerStateChange1
      }
    }
  );
}

function onPlayerReady1(event1) {
  player1.seekTo(section1.start);
  player1.playVideo();
}

function onPlayerStateChange1(event1) {
  if (event1.data == YT.PlayerState.PLAYING) {
    var duration = section1.end - section1.start;
    setTimeout(restartVideoSection1, duration * 1000);
  }
}

function restartVideoSection1() {
  player1.seekTo(section1.start);
}

多个youtube播放器？

2 个答案: