youtube動画の再生リストの自動再生について - JavaScriptプログラミング 問答収集 No:20
きむちゃん
2016-06-22T19:59:03
http://mcs.hakuhin.jp/javascript/atom20
4 名前:状態変更 日付:2016/06/15(水)19:59:00 ID:Z2fjSFchf0/1
http://mcs.hakuhin.jp/javascript/20#20_4
2016-06-15T19:59:00
この質問の状態を『解決』に変更しました。]]>
3 名前:きむちゃん 日付:2016/06/11(土)13:48:32 ID:rrFN1TsvIXO5
http://mcs.hakuhin.jp/javascript/20#20_3
2016-06-11T13:48:32
希望通りの動きを実現することができました。感謝いたします。
――――――――修正後のHTMLファイルの全体――――――――
<!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>
――――――――修正後のHTMLファイルの全体――――――――]]>
2 日付:2016/06/11(土)01:41:47 ID:Z2fjSFchf0/1
http://mcs.hakuhin.jp/javascript/20#20_2
2016-06-11T01:41:47
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();
}
}
]]>
1 名前:きむちゃん 日付:2016/06/09(木)11:18:04 ID:nUUbLDN69Imn
http://mcs.hakuhin.jp/javascript/20#20_1
2016-06-09T11:18:04
YouTubeのIframeAPIを使って、再生リストを連続再生するところまではできたのですが、
HTMLファイルを開いた段階で、自動再生(autoplay)したいのですが、自動再生されません。
下記のファイルの中で、
playerVars: {
rel: 0,
autoplay: 1
}
をいれているのですが、自動的に再生されません。
ご教示、お願いいたします。
――――――――HTMLファイルの全体――――――――
<!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>
――――――――HTMLファイルの全体――――――――]]>