YouTubeビデオ用のカスタムhtml5プレーヤーを作成しています。YouTube iframe API(https://developers.google.com/youtube/iframe_api_reference)のサンプルに基づいています。ウェブサーバーで表示している限り、一時停止/再生/停止のすべてのJavaScriptコントロールはChrome / FF / IE9で正常に機能しますが、プレイリストの前の動画/プレイリストコントロールの次の動画はChromeとFFでのみ機能します。IEで、「このビデオは現在利用できません」というメッセージが表示されます(プレイリストの最初のビデオは引き続き正常に再生されます)。これは、ID(loadVideoById)を使用して特定のビデオに切り替えようとした場合にも発生します。
動画の上部にある情報バーで、[再生リストの次の動画]をクリックすると、すべての動画の名前が循環していることがわかります。それぞれの動画を再生しようとして失敗したと思います。
再生リスト内のビデオのいずれかを個別に再生しようとすると、正常に機能します。
コンソール/アラート/その他を介してプレイリスト内のすべてのビデオの配列を返すと、期待されるすべてのものがそこにあります。以下のコード:
<!doctype html>
<html>
<head>
<title>custom youtube player</title>
</head>
<body>
<div id="player"></div>
<br/>
<a onclick="player.playVideo();" href="#">play</a>
<br/>
<a onclick="player.pauseVideo();" href="#">pause</a>
<br/>
<a onclick="player.stopVideo();" href="#">stop</a>
<br/>
<a id="playPrev" onclick="player.previousVideo();" href="#">previous video in playlist</a>
<br/>
<a id="playNext" onclick="player.nextVideo();" href="#">next video in playlist</a>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: { 'showinfo': 1, 'controls': 1},
videoId: 'ZrG0WsDuriM',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
event.target.loadPlaylist({listType: 'playlist', list: 'PL8D3EFFBB747B9769', suggestedQuality: 'small'});
}
</script>
</body>
</html>