YoutubeAPIと埋め込みビデオについてサポートが必要です。いくつかの要素(div、link、tdなど)をクリックしたときにビデオを停止したい。現在、1つの動画でのみ機能させようとしていますが、このスクリプトの最後の機能は、現在のページに読み込まれているすべての動画を停止することです。 YT APIのドキュメントを読んだことがありますが、私はJSの初心者なので、まだ理解するのは非常に困難です。
<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
<a href="javascript:ytplayer.stopVideo()">Play</a>
<br/>
<iframe id="ytplayer" src="http://www.youtube.com/embed/8Ax-dAR3ABs?rel=0&iv_load_policy=3&showinfo=0&enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash" frameborder="0" allowscriptaccess="always"></iframe>
</body>
</html>
アドバイスを事前に感謝します
Iframeに埋め込んだ場合は制御できません。次のように、オブジェクトの埋め込みを使用する必要があります。
<object id="ytplayer" style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1">
<param name="allowScriptAccess" value="always">
<embed id="ytplayer" src="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390">
</object>
コードの残りの部分は通常、その後は機能するはずですが、次のように更新する必要がある場合があります。
<a href="javascript:document.getElementById('ytplayer').stopVideo()">Play</a>
また、デモサイトを見たことがありますか? http://code.google.com/apis/youtube/youtube_player_demo.html
私は最近、youtubeapiからこれのための小さなjqueryを書きました
すべての動画が1つのアクションで再生されないようにしたかった
<html>
<head>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<!-- player divs -->
<div id="player1"></div>
<div id="player2"></div>
<div id="player3"></div>
<a class="stop">Stop</a>
<script>
// load api
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// make player array
var players = new Array();
function onYouTubeIframeAPIReady() {
players[0] = new YT.Player('player1', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw'
});
players[1] = new YT.Player('player2', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw'
});
players[2] = new YT.Player('player3', {
height: '390',
width: '640',
videoId: 'u1zgFlCw8Aw'
});
}
$('.stop').click( function() {
//loop players array to stop them all
$(players).each(function(i){
this.stopVideo();
});
});
</script>
</body>
</html>
または単一のビデオを停止するには:
$('.stop').click( function() {
playerVariableName.stopVideo();
});
Youtube apiに精通していませんが、他のコードが正しい場合、これは機能するはずです。
_<script type="text/javascript">
player = document.getElementById('ytplayer');
function stop(){
player.stopVideo();
return false;
}
</script>
<a href="#" onclick="stop()">Play</a>
_
これを<a href="javascript:ytplayer.stopVideo()">Play</a>
タグの場所に挿入します。