サイト制作に関するメモ書き

HOME > JavaScript > YouTubeプレーヤーAPIでプレーヤーに別の動画を読み込む

YouTubeプレーヤーAPIでプレーヤーに別の動画を読み込む

YouTubeのプレーヤーに別の動画を読み込ませる方法をメモ。

サンプルコード

読み込ませる方法はYouTube IDを指定する方法とURLを指定する方法があります。

HTML

<div id="sample"></div>
<div class="button-area">
	<button id="cueVideoId">IDから動画読み込み</button>
	<button id="loadVideoId">IDから動画読み込み + 再生</button>
	<button id="cueVideoUrl">URLから動画読み込み</button>
	<button id="loadVideoUrl">URLから動画読み込み + 再生</button>
</div>

JavaScript

// YouTube Player APIを読み込む
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 ytPlayer;
var ytArea = 'sample';
var ytID = 'DJwMOnaci8o';

// API読み込み後にプレーヤー埋め込み
function onYouTubeIframeAPIReady() {
	ytPlayer = new YT.Player(ytArea, {
		width: 640,
		height: 390,
		videoId: ytID
	});
}

// IDから動画を読み込む
document.getElementById('cueVideoId').addEventListener('click', function() {
	ytPlayer.cueVideoById('8QjqkATvH9M');
}, false);

// IDから動画を読み込んで再生する
document.getElementById('loadVideoId').addEventListener('click', function() {
	ytPlayer.loadVideoById('rqHsEVwYdX4');
}, false);

// URLから動画を読み込む
document.getElementById('cueVideoUrl').addEventListener('click', function() {
	ytPlayer.cueVideoByUrl('http://www.youtube.com/v/pp70baXff_Q');
}, false);

// URLから動画を読み込んで再生する
document.getElementById('loadVideoUrl').addEventListener('click', function() {
	ytPlayer.loadVideoByUrl('http://www.youtube.com/v/zdoBFSBQMfs');
}, false);

プレーヤーに別の動画を読み込ませるデモページ

player.cueVideoById(videoId) videoIdで指定された動画を再生する準備をする。
準備のみで再生はされない。
player.loadVideoById(videoId) videoIdで指定された動画を読み込んで再生する。
player.cueVideoByUrl(mediaContentUrl) mediaContentUrlで指定された動画を再生する準備をする。
準備のみで再生はされない。
player.loadVideoByUrl(mediaContentUrl) mediaContentUrlで指定された動画を読み込んで再生する。

他にも引数で再生開始位置や再生画質も設定できるようなので、詳しくは公式ドキュメントをご確認ください。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP