youtube動画の再生リストの自動再生について

レス数:4 / 状態:解決済み / No:20 / ATOM

1 名前:きむちゃん 日付:2016/06/09(木)11:18:04 ID:nUUbLDN69Imn

youtube動画の再生リストの「自動再生」について、悩んでおります。

YouTubeのIframeAPIを使って、再生リストを連続再生するところまではできたのですが、
ＨＴＭＬファイルを開いた段階で、自動再生（autoplay)したいのですが、自動再生されません。

下記のファイルの中で、

    playerVars: {
                rel: 0,
                autoplay: 1
            }

をいれているのですが、自動的に再生されません。
ご教示、お願いいたします。

――――――――ＨＴＭＬファイルの全体――――――――
<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
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 player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',

events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},

    playerVars: {
                rel: 0,
                autoplay: 1
            },

});
}

function onPlayerReady(event) {
player.cuePlaylist([
'v8N0Y2ETCl8',
'P_WjrS6YjxA'
]);
}

function onPlayerStateChange(event) {
console.log(event);
}

</script>
</body>
</html>
――――――――ＨＴＭＬファイルの全体――――――――

2 日付:2016/06/11(土)01:41:47 ID:Z2fjSFchf0/1

playerVars で指定する autoplay パラメータは、
YT.Player() コンストラクタで指定する videoId に作用するようです。

cuePlaylist() メソッドを呼び出すと、再読み込みが発生します。
準備が完了したか調べるには、PlayerState が CUED に変化するまで待機します。
https://developers.google.com/youtube/iframe_api_reference#cuePlaylist
https://developers.google.com/youtube/iframe_api_reference#getPlayerState

再生を開始するには、playVideo() メソッドを使用します。
https://developers.google.com/youtube/iframe_api_reference#playVideo

function onPlayerStateChange(event) {

// プレイヤーステートを取得する
var state = player.getPlayerState();

// 頭出し済み状態である
if(state == YT.PlayerState.CUED){

// 動画を再生する
player.playVideo();
}
}

3 名前:きむちゃん 日付:2016/06/11(土)13:48:32 ID:rrFN1TsvIXO5

深夜にも関わらず、親切なご回答をしてありがとうございます。
希望通りの動きを実現することができました。感謝いたします。

――――――――修正後のＨＴＭＬファイルの全体――――――――

<!DOCTYPE html>
<html>
<body>
<div id="player"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
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 player;

function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',

    playerVars: {
                rel: 0,
                autoplay: 1,
loop:1

            },

events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},

});
}

function onPlayerReady(event) {
player.cuePlaylist([
'v8N0Y2ETCl8',
'P_WjrS6YjxA'
]);
}

function onPlayerStateChange(event) {

// プレイヤーステートを取得する
var state = player.getPlayerState();

// 頭出し済み状態である
if(state == YT.PlayerState.CUED){

// 動画を再生する
player.playVideo();
}
}

</script>
</body>
</html>

――――――――修正後のＨＴＭＬファイルの全体――――――――

4 名前:状態変更 日付:2016/06/15(水)19:59:00 ID:Z2fjSFchf0/1

この質問の状態を『解決』に変更しました。

このスレッドについて

質問の状態 :	解決済み
投稿開始日 :	2016/06/09(木)11:18:04
投稿終了日 :	2016/06/22(水)19:59:03
投稿者 :	きむちゃん
レス総数 :	4
スレッド番号 :	20