複数のyoutubeプレーヤー？

Question

私は2人のyoutubeプレーヤーを持ってほしい：
1.ループの開始から終わりまで再生され、再生されます。
2.ループで10秒から20秒と言うことができます。

私は実際に別々に動作するこの2つのスクリプトを持っていますが、一緒には動作しません。どのように1つの機能でそれらを組み合わせるかはわかりません。

誰でも手助けできますか？

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

//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);

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