YouTube IFrame API ,再生リストの動作確認、
以前に作成したプログラムは正常に停止しない、再び最初から
再生が始まります。そのための確認です。
今回のストップボイントは下記となります、各event.コード発生時に
実行します。
function stop(event){
if(event.target.getPlaylist()){
if(event.target.getVideoData().video_id == event.target.getPlaylist()[event.target.getPlaylist().length -1]) {
event.target.stopVideo();
}else{
event.target.playVideo();
}
}
}
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// YouTube Player API Reference for iframe Embeds
// https://developers.google.com/youtube/iframe_api_reference
// 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: '0',
width: '0',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
'onError' : onPlayerError,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
console.log(event.target.getPlayerState());
player.cuePlaylist({list:'PLoxAMAuDB1YbftJRZtIlec92SFNAPTnjW'});
event.target.playVideo();
}
function onPlayerStateChange(event) {
console.log('event.target.getPlayerState()' + event.target.getPlayerState());
console.log('event.data' + event.data);
console.log('player.getPlaylistId()' + event.target.getPlaylistId());
console.log('player.getPlaylist()' + event.target.getPlaylist());
console.log('player.getPlaylistIndex()' + event.target.getPlaylistIndex());
if(event.target.getPlayerState() == 5){
stop(event);
console.log('5---' + event.target.getPlayerState());
}
if(event.target.getPlayerState() == 4){
stop(event);
console.log('4---' + event.target.getPlayerState());
}
if(event.target.getPlayerState() == 3){
stop(event);
console.log('3---' + event.target.getPlayerState());
}
if(event.target.getPlayerState() == 2){
stop(event);
console.log('2---' + event.target.getPlayerState());
}
if(event.target.getPlayerState()== 1){
stop(event);
console.log('1---' + event.target.getPlayerState());
//event.target.nextVideo();
}
if(event.target.getPlayerState() == 0){
stop(event);
console.log('0--' + event.target.getPlayerState());
}
if(event.target.getPlayerState() == -1){
console.log('-1--' + event.target.getPlayerState());
}
}
function onPlayerError(event){
if(event.target.getPlaylist()){
if(event.target.getVideoData().video_id == event.target.getPlaylist()[event.target.getPlaylist().length -1]) {
event.target.stopVideo();
}else{
event.target.nextVideo();
}
}
}
function stop(event){
if(event.target.getPlaylist()){
if(event.target.getVideoData().video_id == event.target.getPlaylist()[event.target.getPlaylist().length -1]) {
event.target.stopVideo();
}else{
event.target.playVideo();
}
}
}
function stop_play() {
console.log(event.target.getPlayerState());
player.stopVideo();
}
//player.cuePlaylist({list:'PLoxAMAuDB1YbftJRZtIlec92SFNAPTnjW'});
</script>
</body>
</html>