YouTube動画を停止するコードはありますか？

Question

私はいくつかのYouTube動画を1つのページに持ち、CSSを使用して選択した動画を表示し、他の動画に切り替えることができます。私は適切なソースコードを見つけられず、既存のものを編集して自分のニーズを満たす経験がないので、jQueryの使用を避けようとしています。問題は、1つのビデオを再生して次のビデオに移動すると、ビデオを隠して表示しているためです。元のビデオがまだ再生されているため、オーディオのクロスオーバーが発生し、多くのビデオでPCが減速します。 Youtubeビデオは "k"キーボードストロークで一時停止することができるので、リンクに「accesskey」機能を追加して一時停止しました。しかし、私はアクセスキーがアクティブになる前にブラウザが隠れていると思うので、ビデオはバックグラウンドで再生し続けます。アクセスキーはアクティブなビデオの再生でのみ機能するからです。私の問題を解決するためのアドバイスや助言。

ウェブサイト（ライブ例）： http://s187242710.onlinehome.us/tdsa/resources.php

HTML：

<script> 
function show(id) { 
    var item = document.getElementById(id); 
    var all = document.getElementsByClassName('hidden'); 
    for(var i=0; i<all.length; i++)all[i].style.display = 'none'; 
    if(item)item.style.display = 'block'; 
} 
</script> 

<h1>Practice Techniques</h1>    

<div class="resourcecontainer"> 
    <a href="javascript:show('test2');"> 
    <img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"> 
    </a> 
</div> 
<div class="resourcecontainer"> 
    <a href="javascript:show('test3');"> 
    <img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"> 
    </a> 
</div> 
<div class="resourcecontainer"> 
    <a href="javascript:show('test4');"> 
    <img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"> 
    </a> 
</div> 
<div class="resourcecontainer"> 
    <a href="javascript:show('test5');"> 
    <img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"> 
    </a> 
</div> 

<br><br> 

<h1>Equipment Selection</h1>    

<div class="resourcecontainer"><img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"></div> 
<div class="resourcecontainer"><img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"></div> 
<div class="resourcecontainer"><img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"></div> 
<div class="resourcecontainer"><img class="resourceimage" src="images/sampleresource.jpg" width="190" height="120" border="0"></div> 

<br><br> 

<div id="test1" class="hidden"> 

</div> 
<div id="test2" class="hidden"> 
    <div class="resourcevideo"> 
     <div class="videolink"><a href="javascript:show('test1');">(Previous)</a></div> 
     <div class="videolink"><a href="javascript:show('test1');" accesskey="k">[Close]</a></div> 
     <div class="videolink"><a href="javascript:show('test3');">(Next)</a></div> 
     <iframe class="centervideo" width="550" height="350" src="https://www.youtube.com/embed/EO4-B_ttHe0" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 
<div id="test3" class="hidden"> 
    <div class="resourcevideo"> 
     <div class="videolink"><a href="javascript:show('test2');">(Previous)</a></div> 
     <div class="videolink"><a href="javascript:show('test1');" accesskey="k">[Close]</a></div> 
     <div class="videolink"><a href="javascript:show('test4');">(Next)</a></div> 
     <iframe class="centervideo" width="550" height="350" src="https://www.youtube.com/embed/XiGt0X0csoE" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 
<div id="test4" class="hidden"> 
    <div class="resourcevideo"> 
     <div class="videolink"><a href="javascript:show('test3');">(Previous)</a></div> 
     <div class="videolink"><a href="javascript:show('test1');">[Close]</a></div> 
     <div class="videolink"><a href="javascript:show('test5');">(Next)</a></div> 
     <iframe class="centervideo" width="550" height="350" src="https://www.youtube.com/embed/XnbPGKB34bU" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 
<div id="test5" class="hidden"> 
    <div class="resourcevideo"> 
     <div class="videolink"><a href="javascript:show('test4');">(Previous)</a></div> 
     <div class="videolink"><a href="javascript:show('test1');">[Close]</a></div> 
     <div class="videolink"><a href="javascript:show('test2');">(Next)</a></div> 
     <iframe class="centervideo" width="550" height="350" src="https://www.youtube.com/embed/qiZOkhJ_wnY" frameborder="0" allowfullscreen></iframe> 
    </div> 
</div> 

CSS：

.resourcecontainer { 
    width:210px; 
    height:140px; 
    float:left; 
    background-color:#EDEDED; 
    margin-right: 20px; 
    text-align:center; 
    margin-bottom:25px; 
    border-radius: 10px; 
} 

.resourceimage { 
    border:solid 1px; 
    border-color:#A5A5A5; 
    margin-top: 10px; 

} 

.resourcevideo { 
    clear: both; 
    width: 600px; 
    height: 450px; 
    color:#FFFFFF; 
    background-color: #000000; 
    z-index: 9999; 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -300px; 
    margin-top: -210px; 
} 

.centervideo { 
    margin: 25px; 
} 

.videolink { 
    color: #FFFFFF; 
    padding: 0px; 
    margin: 0px; 
    font-size:24px; 
    font-weight:bold; 
    background-color:#AA3537; 
    width: 200px; 
    height: 50px; 
    float: left; 
    text-align:center; 
    line-height: 50px; 
    display: block; 
} 

.videolink a { 
    text-decoration:none; 
    color:#FFFFFF; 
} 

.videolink a:hover { 
    color:#000000; 
} 

.hidden { 
    display:none; 
} 

#test1 { 
    display: block; 
} 

Answer 1

あなたがYoutube Player APIとそのFUを使用する必要があります動画の表示と非表示の代わりに、1つのdiv要素に1つずつYouTube動画を動的に読み込みます。この方法では、現在のビデオの再生が停止すると、次/前のビデオが開始されます。

あなたのショー（）関数は、このショーの機能を動的にあなたの次/前と現在の映像を変更しますthis-

function show(id,current_video,next_video,previous_video) { 
    var item = document.getElementById(id); 
    var all = document.getElementsByClassName('hidden'); 
    for(var i=0; i<all.length; i++)all[i].style.display = 'none'; 
    if(item)item.style.display = 'block'; 

    $("#prev").attr('href','javascript:show("test2","'+next_video+'","'+previous_video+'","'+current_video+'")'); 
    $("#next").attr('href','javascript:show("test2","'+previous_video+'","'+current_video+'","'+next_video+'")'); 

    $("#player").attr('src',"https://www.youtube.com/embed/"+current_video+'?enablejsapi=1&origin=http://localhost'); 
    $("#player")[0].src += "&autoplay=0"; 

} 

ようにする必要があります。ただ、 'SRC' を削除

YouTubeプレーヤーAPIはこの

// 2. This code loads the IFrame Player API code asynchronously. 
//document.getElementById("video").hide(); 
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; 

//setInterval(checkTime,1000); 

function onYouTubeIframeAPIReady() { 
player = new YT.Player('player', { 
    height: '350', 
    width: '550', 
    videoId: 'EO4-B_ttHe0', 
    events: { 
    'onReady': onPlayerReady, 
    'onStateChange': onPlayerStateChange 
    } 
}); 
} 
//setInterval(checkTime,1000); 
// 4. The API will call this function when the video player is ready. 
function onPlayerReady(event) { 
//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.CUED) { 
    player.seekTo(0); 
    stopVideo(); 

}*/ 
if (event.data == YT.PlayerState.ENDED) { 

    done = true; 
} 
} 
function stopVideo() { 
player.stopVideo(); 
} 

のように使用する必要がありますし、あなたのHTMLは、この

<h1>Practice Techniques</h1>    

<div class="resourcecontainer"> 
    <a href="javascript:show('test2','EO4-B_ttHe0','XiGt0X0csoE','qiZOkhJ_wnY');"> 
    <img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"> 
    </a> 
</div> 
<div class="resourcecontainer"> 
    <a href="javascript:show('test2','XiGt0X0csoE','XnbPGKB34bU','EO4-B_ttHe0');"> 
    <img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"> 
    </a> 
</div> 
<div class="resourcecontainer"> 
    <a href="javascript:show('test2','XnbPGKB34bU','qiZOkhJ_wnY','XiGt0X0csoE');"> 
    <img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"> 
    </a> 
</div> 
<div class="resourcecontainer"> 
    <a href="javascript:show('test2','qiZOkhJ_wnY','EO4-B_ttHe0','XnbPGKB34bU');"> 
    <img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"> 
    </a> 
</div> 

<br><br> 

<h1>Equipment Selection</h1>    

<div class="resourcecontainer"><img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"></div> 
<div class="resourcecontainer"><img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"></div> 
<div class="resourcecontainer"><img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"></div> 
<div class="resourcecontainer"><img class="resourceimage" src="http://s187242710.onlinehome.us/tdsa/images/sampleresource.jpg" width="190" height="120" border="0"></div> 

<br><br> 




<div id="test1" class="hidden"> 

</div> 
<div id="test2" class="hidden"> 
    <div class="resourcevideo"> 
     <div class="videolink"><a id="prev" href="javascript:show('test1');">(Previous)</a></div> 
     <div class="videolink"><a id="current" href="javascript:show('test1');" accesskey="k">[Close]</a></div> 
     <div class="videolink"><a id="next" href="javascript:show('test3');">(Next)</a></div> 
     <div id="player"></div> 
    </div> 
</div> 

完全なコードはここで見つけることができます https://jsfiddle.net/shoaibakhter/xz7tfs2d/8/

Answer 2

ようにする必要があります属性をiframeの 'data-src'に格納します。もう一度再生するには、手順を逆にします。一度にすべてを停止するには、次のような操作を行います。

$('.center-video').each(function() { 
    $(this).attr('data-src',$(this).attr('src')); 
    $(this).attr('src',''); 
}); 

Ps。動画を自動再生するように設定する必要があります。再生に使用するとiOSでは機能しません（自動再生は機能しないため）。