Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
YouTube IFrame APIで再生リストの埋め込みiframe内の動画のURLを取得するサンプル。 http://d.hatena.ne.jp/KEINOS/20161103 用のサンプルコードです。
<!DOCTYPE html>
<html>
<body>
<!-- 1. 下記<div>タグが<iframe> (とビデオ・プレーヤー)に置き換わります。 -->
<h3>YouTube Play List</h3>
<div id="player"></div>
<!-- 動画が次へ移るとonPlayerStateChange関数により<div>タグ内の情報も更新されます -->
<h3>Current URL of Video</h3>
<div id="video_url"></div>
<h3>Current ID of Video</h3>
<div id="video_id"></div>
<!-- 2. IFrame Player APIの読み込み。
最初に読み込む必要があるため、一般的には非同期(最初のscriptタグ出現の前に
scriptエレメントを動的に挿入し、そのsrc属性)でAPI読み込みを最初に読み込ま
せます。
-->
<script src="https://www.youtube.com/iframe_api"></script>
<!-- jQueryの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
// 3. この関数はAPI読み込み後、<iframe>(とYouTubeプレーヤー)
// を生成します。
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player( 'player', {
height : '390',
width : '640',
playerVars: {
listType : 'playlist',
list : '<YOUT YOUTUBE PLAYLIST ID>',
'autoplay' : 1,
'controls' : 1
},
events: {
'onReady' : onPlayerReady,
'onStateChange' : onPlayerStateChange
}
});
}
// 4. 動画の準備ができると、APIはこの関数を呼び出します。
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. 動画のステータス(状態)に変更があると、APIは下記関数を呼び出します。
// ここでは、動画のURLをチェックし、動画が変更された場合、上記<div>の内容
// をURLに書き換えます。
var latestVideoId;
function onPlayerStateChange(event) {
var currentVideoId;
if ( event.data == YT.PlayerState.PLAYING ) {
currentVideoId = getVideoIdFromUrl( player.getVideoUrl() );
if( latestVideoId != currentVideoId ){
latestVideoId = getVideoIdFromUrl( player.getVideoUrl() );
$('#video_url').html( player.getVideoUrl() );
$('#video_id').html( latestVideoId );
}
}
}
function stopVideo() {
player.stopVideo();
}
// urlから動画のIDを取得する
function getVideoIdFromUrl( url ){
var vars = [], hash;
var hashes = url.slice( url.indexOf('?') + 1 ).split('&');
for( var i = 0; i < hashes.length; i++ ) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars["v"]; // URL内のクエリが"v"の内容を返す
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.